异步操作之async

「爱情、让人受尽委屈。」 2022-05-15 02:41 201阅读 0赞

上篇文章讲述了Promise，这次来看一下async。  
async函数(包含函数语句、函数表达式、Lambda表达式)会返回一个Promise对象，如果在函数中return一个直接量，async会把这个直接量通过Promise.resolve()封装成Promise对象。由此可以知道，async之所以能够进行异步操作，其实还是Promise在起作用。

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

async函数返回的是一个Promise对象，所以在最外层不能用await获取其返回值的情况下，我们应该用原来的方式：then()链来处理这个Promise对象

testAsync().then(v => {
        console.log(v);
    })
    //hello async

如果async函数没有返回值，它会返回Promise.resolve(undefined)  
Promise的特点——无等待，所以在没有await的情况下执行async函数，它会立即执行，返回一个Promise对象，并且，绝不会阻塞后面的语句。这和普通返回Promise对象的函数并无二致。  
一般来说，都认为await是在等待一个async函数完成。不过按语法说明，await等待的是一个表达式，这个表达式的计算结果是Promise对象或者其它值（没有特殊限定）。  
因为async函数返回一个Promise对象，所以await可以用于等待一个async函数的返回值——这也可以说是await在等async函数，但要清楚，它等的实际是一个返回值。注意到await不仅仅用于等Promise对象，它可以等任意表达式的结果，所以，await后面实际是可以接普通函数调用或者直接量的。

await是个运算符，用于组成表达式，await表达式的运算结果取决于它等的东西。  
如果它等的不是一个Promise对象，那await表达式的运算结果就是它等到的东西。  
如果它等到的是一个Promise对象，await就忙起来了，它会阻塞后面的代码，等着Promise对象resolve，然后得到resolve的值，作为await表达式的运算结果。  
async函数调用不会造成阻塞，它内部所有的阻塞都被封装在一个Promise对象中异步执行。await用在async函数中，就是为了阻塞后面的代码，等待Promise对象执行resolve。  
async会将其后的函数(函数表达式或Lambda)的返回值封装成一个Promise对象，而await会等待这个Promise完成，并将其resolve的结果返回出来。

async/await的优势在于处理then链  
单一的Promise链并不能发现async/await的优势，但是，如果需要处理由多个Promise组成的then链的时候，优势就能体现出来了(Promise通过then链来解决多层回调的问题，现在又用async/await来进一步优化它)。  
例子一：  
传入参数n，表示这个函数执行的时间(用于毫秒)  
执行的结果是n + 200，这个值将用于下一步骤

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

用async/await来实现

async function doIt1() {
        console.time("doIt1");
        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("doIt1")
    }
    doIt1();
    // step1 with 300
    // step2 with 500
    // step3 with 700
    // result is 900
    // doIt: 1505.547119140625ms

两种方式的实现是一样的，但是使用async/await编写的代码看起来更加清晰，几乎和同步代码一样。  
例子二：  
把业务要求改一下，仍然是三个步骤，但每一个步骤都需要之前每个步骤的结果。

Promise方式实现,传递参数太麻烦了

然而async/await还是一直的清晰明了

async function doIt3() {
        console.time("doIt3");
        const time1 = 300;
        const time2 = await step4(time1);
        const time3 = await step5(time1, time2);
        const result = await step6(time1, time2, time3);
        console.log(`result is ${result}`);
        console.timeEnd("doIt3");
    }
    doIt3();
    //step4 with 300
    //step5 with 300 and 500 
    //step6 with 300, 500 and 1000 
    //result is 2000
    //doIt2: 2907.419189453125ms

这下你懂得async/await的优势了吧。