async await

async/await是什么

async是Generator的语法糖
基本上async替代Generator函数声明所需的*,而await替代yeild,而且在Genenrator中执行另外一个Genenrator时,yield需要加各*,而await就不用加了。
总的说,async 用于申明一个 function 是异步的,而 await 用于等待一个异步方法执行完成。
async相对于Genertator的优点是它可以自动执行了,而不是需要一步步的next操作。实质上是async包含了一个自动执行函数。
Generator实质上多被应用在异步操作中,async/await显然更语义化。

async/await干什么

async 函数返回一个 Promise 对象,可以使用 then 方法添加回调函数。当函数执行的时候,一旦遇到 await 就会先返回,等到触发的异步操作完成,再接着执行函数体内后面的语句。

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

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

在上述例子可以看到,async的结果是一个promise对象,成功执行后它包含了resolve的信息。
那既然async跟promise有了关联,肯定也有它自己的优势,否则异步操作直接使用promise不就得了?
async的优势在于处理then链。
我们知道,await/yield就好比一个个关卡,直到执行ok才会开放下一步的通道,实质上then链也是一样的,直到上一步执行完毕有了结果,才会执行then函数。await和then本质上都依赖于上一步的结果。
使用await简化了异步函数的结构,再也不用写无穷无尽的then链,而是一步步的await了。
以下是对比:

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);
}
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();

如果使用async:

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();

显然函数的层级关系更加明显。
上述例子是有关一个先后顺序异步的,如果我们需要并行的操作呢?
promise的all方法可以解决,我们将每一个await的结果存进一个数组里面。另外也可以使用for...of方法,不要忘记Generator是内置了遍历接口的。
在之前的Generator的小结里面有提到它可以抛出错误,那么我们可以结合一下,promise虽然有catch方法,但是链式结构显然不太简洁,我们可以利用try...catch代码块。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容