es6异步解决方案

Posted 2021-03-10 lhlvs

最初使用回调函数

? 由于最初j s官方没有明确的规范，各种第三方库中封装的异步函数中传的回调函数中的参数没有明确的规范， 没有明确各个参数的意义， 不便于使用。

? 但是node中有明确的规范

? node中的的回调模式：

    1. 所有回调函数必须有两个参数，第一个参数表示错误，第二个参数表示结果
    2. 所有回调函数必须作为函数最后的参数
    3. 所有回调函数不能作为属性出现

es6 异步处理模型

Es6 出现以后， 官方就提出了异步处理的规范， 提出了一种适用于所有异步场景的处理模型。该模型有：

两个阶段： 未决unsettled, 已决settled。

三个状态： pending挂起状态 , resolved成功， rejected失败

总是从未决阶段推向已决阶段，且已决阶段的状态不再改变

任务已决状态后可能需要后续处理，

针对resolved的后续处理我们称之为thenable

针对rejected的后续处理我们称之为catchable

为该异步模型量身打造的API ： promise

如何使用promise

const task = new Promise((resolve, reject) => {
    // 任务未决阶段代码
    // 立即执行
    console.log("开始100米长跑");
    setTimeout(() => {
       if (Math.random() > 0.5) {
           // 成功： 跑完了
           // 推向成功
           resolve("跑完了");
       } else {
           // 失败： 腿摔断了
           // 推向失败
           reject("腿摔断了");
       }
    }, 1000)
});
task.then((result) => {
  console.log(result);
}).catch((error) => {
  console.log(error);
})

1s 后任务推向已决, 后续处理在then 或者 catch中 处理。

注意

pending状态 =》rejected状态 ：

1. 调用reject
2. 代码执行报错
3. 手动抛出错误

后续处理函数一定是异步的，且会放到微队列中，

j s执行栈清空后会先执行微队列中的任务，微队列里任务清空后才会执行宏队列中的任务。

宏任务队列有：setTimeout，setInterval，setImmediately，I/O,UI render

微任务队列有：promise，process.nexttick,Object.observe(已经不用了),Mutation.observe

Async await 是es7新增的promise的语法糖大家也可以了解下，本文只是对promise做了个概述，

要掌握的其他细节还有很多