理解 JavaScript 的 async/await

1、async 用于申明一个 function 是异步的，而 await 用于等待一个异步方法执行完成。

2、await 只能出现在 async 函数中。

3、async 函数返回的是一个 Promise 对象。

//在函数中 return 一个直接量，async 会把这个直接量通过 Promise.resolve() 封装成 Promise 对象。
async function testAsync() {
    return "hello async";
}

const result = testAsync();
console.log(result);  //Promise { 'hello async' }

 function testAsync() {
    return "hello async";
}

const result = testAsync();
console.log(result);  //hello async

4、then() 链来处理Promise 对象。

async function testAsync() {
    return "hello async";
}
testAsync().then(v => {
    console.log(v);    // 输出 hello async
});

5、Promise 的特点——无等待，所以在没有 await 的情况下执行 async 函数，它会立即执行，返回一个 Promise 对象，并且，绝不会阻塞后面的语句。这和普通返回 Promise 对象的函数并无二致。

6、 async 函数返回一个 Promise 对象，所以 await 可以用于等待一个 async 函数的返回值。

7、await 不仅仅用于等 Promise 对象，它可以等任意表达式的结果，await 后面实际是可以接普通函数调用或者直接量的。

function getSomething() {
    return "something";
}
async function testAsync() {
    return Promise.resolve("hello async");
}
async function test() {
    const v1 = await getSomething();
    const v2 = await testAsync();
    console.log(v1, v2);
}
test(); //something hello async

8、假设一个业务，分多个步骤完成，每个步骤都是异步的，而且依赖于上一个步骤的结果。我们仍然用 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);
}

8.1、用 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.timeEnd("doIt");
        });
}
doIt();
// step1 with 300
// step2 with 500
// step3 with 700
// result is 900
// doIt: 1507.251ms
//输出结果 result 是 step3() 的参数 700 + 200 = 900。doIt() 顺序执行了三个步骤。
//一共用了 300 + 500 + 700 = 1500 毫秒，和 console.time()/console.timeEnd() 计算的结果一致。

8.2、用 async/await 来实现

async function doIt() {
    console.time("doIt");
    const time1 = 300;
    const time2 = await step1(time1);
    const time3 = await step2(time2);
    const result = await step3(time3);
    console.log(`result is ${result}`);
    console.timeEnd("doIt");
}
doIt();
//step1 with 300
//step2 with 500
//step3 with 700
//result is 900
// doIt: 1504.81689453125 ms

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

转载连接点这个