async要点

一、async/await的优势在于处理 then 链

单一的 Promise 链并不能发现 async/await 的优势，但是，如果需要处理由多个 Promise 组成的 then 链的时候，优势就能体现出来了（很有意思， Promise 通过 then 链来解决多层回调的问题，现在又用 async/await 来进一步优化它）。

假如有一个业务，分多个步骤完成，每个步骤都是异步的，而且依赖于上一个步骤的结果。我们仍然用 setTimeout 来模拟异步操作：

/*
*  传入参数 n，表示这个函数执行的时间（毫秒）
*  执行的结果是 n + 200，这个值将用于下一步骤
*/
function takeLongTime(n){
       return new Promise(resolve => {
              setTimeout(() => resolve(n+200),n);   
       })
}

function step1(n){
       console.log(`step1 with ${n}`);
       return takeLongTime(n);
}

function step2(n){
       console.log(`step2 with ${n}`);
       return takeLongTime(n);
}

function step3(n){
       console.log(`step3 with ${n}`);
       return takeLongTime(n);
}

现在用 Promise 方式来实现这三个步骤的处理

function doIt(){
    console.time('doIt');
    const time1 = 300;
    step1(time1)
    .then(time2 => step2(time2))
    .then(time3 => step3(time3))
    .then(result => {
          console.log(`result is ${result}`);
          console.log(timeEnd('doIt');
     })
}
doIt();
// step1 with 800
// step2 with 1000
// step3 with 1200
// result is 1400
// doIt: 3002.363037109375ms

如果用 async/await 来实现呢，会是这样

 async function start(){
    console.time('start');
    let time1 = 800;
    let time2 = await step1(time1);
    let time3 = await step2(time2);
    let result = await step3(time3);
    console.log(`result is ${result}`);
    console.timeEnd('start');
}
// start();                
// step1 with 800
// step2 with 1000
// step3 with 1200
// result is 1400
// start: 3004.556884765625ms

结果和之前的 Promise 实现是一样的，但是这个代码看起来是不是清晰得多，几乎跟同步代码一样

原文： 理解 JavaScript 的 async/await