同步和异步区别

因为JS是单线程语言
同步是阻塞模式，异步是非阻塞模式。
同步就是指一个进程在执行某个请求的时候，若该请求需要一段时间才能返回信息，那么这个进程将会一直等待下去，直到收到返回信息才继续执行下去。
异步是指进程不需要一直等下去，而是继续执行下面的操作，不管其他进程的状态。当有消息返回时系统会通知进程进行处理，这样可以提高执行的效率。
同步和异步的差别就在于这条流水线上各个流程的执行顺序不同。

单线程和异步

JS是单线程语言，只能同时做一件事
浏览器和nodejs已支持JS启动进程，如Web Worker
JS和DOM渲染共用同一个线程，因为JS可以修改DOM结构

why

在浏览器中遇到等待时不能卡住
通过异步解决，异步不会阻塞代码执行，同步会阻塞代码执行
回调call back实现

console.log(200)    //1
setTimeout(()=>{  //回调函数
  console.log(100)  //3
}, 300)
console.log(300)    //2

callback hell（回调地狱）

Promise的三种状态

三种状态

pending准备 fulfilled成功 rejected失败
pengding->fulfilled/pending->rejected
变化是不可逆的
pending准备, 不会触发then和catch

fulfilled成功, 会触发后续的then回调函数

const p1 = Promise.resolve(100)
p1 //Promise {<fulfilled>: 100}

p1.then(data => {
  console.log('data', data) //data 100
}).catch(err => {
  console.error('err', err) //不会执行
})

rejected失败，会触发后续的catch回调函数

const p2 = Promise.reject('err')
p2 //Promise {<rejected>: 'err'}

p2.then(data => {
  console.log('data', data) //不会执行
}).catch(err => {
  console.error('err', err) //err err
})

promise then和catch如何影响状态的转换

then正常返回resolved,里面有报错则返回rejected

const p1 = Promise.resolve().then(() => {
  return 100         //正常返回resolved
})
p1.then(() => {
  console.log('123')  //123
})

const p1 = Promise.resolve().then(() => {
  throw new Error('then error')   //then error
  //报错返回rejected
})
p1.then(() => {
  console.log('456')  //不执行无输出
}).catch(() => {
  console.error('err100', err)  //err100 err
})

catch正常返回resolved,里面有报错则返回rejected

const p3 = Promise.reject('my error').catch((err) => {
  console.error(err)         //正常返回resolved！触发then回调 
})
p3.then(() => {
  console.log('123')  //123
})

const p4 = Promise.reject('my error').catch((err) => {
  throw new Error('catch error')   //catch error
  //报错返回rejected
})
p1.then(() => {
  console.log('456')  //不执行无输出
}).catch(() => {
  console.error('err100', err)  //err100 err
}) //resolved的promise

async-await同步语法，消灭回调函数

语法糖，不能改变异步的本质

async function xxx() {
  ...
}

(async function(){
  ...
})()

和promise的关系

消灭回调函数
和promise不冲突，相辅相成

how

执行async函数，返回promise对象

async function fn1(){
  // return 100 //会被封装成promise对象，相当于
  return Promise.resolve(100)
}
const res1 = fn1()  //执行async函数，返回promise对象
res1.then(data => {
  console.log('data', data) //data 100
})

await相当于promise的then

!(async function() {
  // const p1 = Promise.resolve(300)
  // const data = await p1 //await相当于promise的then
  const data = await 400 //相当于await Promise.resolve(400)
  console.log('data', data) //data 400
})()

//注意
!(async function() {
  const p1 = Promise.reject('err')  //rejected状态
  const data = await p1 //await => then
  console.log(res)  //不会执行
})()

try...catch可捕获异常，代替promise的catch

!(async function() {
  const p1 = Promise.reject('err')
  try{
    const res = await p1  //捕获err
    console.log(res)
  } catch(ex) {
    console.error(ex) //try...catch可捕获异常，代替promise的catch
  }
})()