async-await语法糖

同步/异步/async + await的异步：

1. 由于浏览器/引擎负责解释和执行JavaScript的主线程是单线程，同步执行一个耗时较大的任务会导致阻塞。
2. 异步执行代码可以解决阻塞问题，但会带来顺序的不确定性（要注意这里顺序的不确定性指的是多个异步任务的不确定性）
3. 如果这些任务彼此不相关，就不一定需要交互，如果没有相互影响的话，不确定性是完全可以接收的。
4. 如果你需要保证异步执行的顺序，比如依次远程读取一系列url，按顺序触发动画等，就需要嵌套很多层回调函数。
5. 多级嵌套的回调函数弊端很多：不直观，强耦合，回调的不确定性，不利于维护和复用。
6. Promise对象允许将这些回调函数的嵌套，改为链式调用。并用then保证执行顺序。Promise还能保证每次返回的都是一个新的Promise对象，所以代码一定被异步执行。
7. 这种方法还是不够简明，语义化，你只能看到一堆then。于是有了async和await，把异步执行的代码写得像同步代码那样直观。async的函数中可以有一个或多个异步操作，一旦遇到await就会立即返回一个pending状态的Promise对象，暂时返回执行代码的控制权，使得函数外的代码得以继续执行，这是保证非阻塞的部分。并且多个异步请求是可以并发的（多个Job Queue、Ajax、Timer、I/O(Node)）。等await后的异步请求resolve了（或reject），主线程才会继续执行async函数内后面的部分，这是保证的顺序性（而且最终函数返回的也是一个Promise对象）。我们说的把异步变同步指的是在async函数内部异步代码就像被同步执行的那样（继续执行），而不是它会阻塞主线程一直等待异步调用返回。

测试代码：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

const synchronous = () => {
    const promise = Promise.resolve(0);
    console.log(promise === 0);
};

const asynchronous = async() => {
    const promise = Promise.resolve(0);
    const value = await promise;
    console.log(value === 0);
};

console.log(synchronous());
console.log(asynchronous());

console.log("This code will not be block by the await promise in function asynchronous");

执行结果：

1
2
3
4
5

false
undefined
Promise { <pending> }
This code will not be block by the await promise in function asynchronous
true

上一篇 « javascript 下一篇 » 多巴胺