async await基础

这是我参与8月更文挑战的第4天，活动详情查看：8月更文挑战

1.引入async和await的缘由

①用promise解决异步函数仍然不够简洁

②promise的then链传递参数仍然很复杂

promise用来解决回调函数多层嵌套，async/await用来优化promise的多个then链调用和传参问题。

2.async/await

从操做形式上看：Generator 函数的语法糖。async函数就是将 Generator 函数的星号（*）替换成async，将yield替换成await。

从功能上看：await命令就是内部then命令的语法糖。

2.1 async函数:

声明某个函数是异步函数。

做用：async 函数返回的是一个 Promise 对象。

因此若是某个函数返回的自己就是promise的话，不须要使用async声明。

若是async声明的函数不是promise对象，async 会把这个直接量经过 Promise.resolve() 封装成 Promise 对象。即便没有返回值，async也会返回Promsie.resolve(undefined)。

2.2 await关键字：

await只能写在async函数中

await是一个运算符， 与其后面表达式的值进行运算获得最终结果，(咱们能够定义一个变量接受这个结果，传递给下一个异步操做做为参数)。

十分十分重要!!!!!! :

• await后面不是一个 Promise 对象: await会阻塞后面的代码，先执行async外面的同步代码，同步代码执行完，再回到async内部，把这个非promise的东西，做为 await表达式的结果。
• await后面是一个 Promise 对象: await 会阻塞后面的代码，先执行async外面的同步代码，等着 Promise 对象 resolve，而后获得 resolve 的值，做为 await 表达式的运算结果。

例:有三个步骤，但每个步骤都须要以前每一个步骤的结果。

function step1(n) { 
    console.log(`step1 with ${n}`);
    return takeLongTime(n);
}
function step2(m, n) {
    console.log(`step2 with ${m} and ${n}`);
    return takeLongTime(m + n);
}
function step3(k, m, n) {
    console.log(`step3 with ${k}, ${m} and ${n}`);
    return takeLongTime(k + m + n);
}
复制代码

写成 Promise 方式实现:

function doIt() {
    console.time("doIt");
    const time1 = 300;
    step1(time1)
    .then(time2 => {
        return step2(time1, time2)
            .then(time3 => [time1, time2, time3]);
     })
    .then(times => {
        const [time1, time2, time3] = times;
        return step3(time1, time2, time3);
     })
    .then(result => { console.log(`result is ${result}`);
        console.timeEnd("doIt");
    });
}
doIt();
复制代码

写成async/await:

async function doIt() {
    console.time("doIt");
    const time1 = 300;
    const time2 = await step1(time1);
    const time3 = await step2(time1, time2);
    const result = await step3(time1, time2, time3);
    console.log(`result is ${result}`);
    console.timeEnd("doIt");
}
doIt();
复制代码

2.3async函数的优势（改进）:

• 更好的语义，将异步操做的代码同步化
• 对比promise的then链传递参数更方便
• 返回值是promise对象，能够用then方法指定下一步的操做。

参考：

一道面试题目的执行顺序：

1.www.cnblogs.com/fundebug/p/…