Js中async/await的执行顺序详解

喜欢ヅ旅行 2024-04-19 15:20 130阅读 0赞

// 异步函数
    async function asyncFn() {
        // do something 
        let foo = await fn();
        // continue...
    }
    asyncFn();

![awaitæ§è¡é¡ºåºå¾ç¤º][await]

证明  
外部的promise被推入队列的时机存在两种可能性：

1.在await跳出async函数之前；

2.在await跳出async函数之后。

1的情况是显然的：在跳出async函数之前就被推入列队的promise会在跳出之后，执行完task以后按顺序执行；

那么，在跳出async函数之后才被推入队列的promise，究竟是在回到async函数之前还是之后执行呢？

先看一下代码：

// 异步函数
    async function isAsync() {
        console.log('isAsync start');
        return 'isAsync end';
    }
    
    let promise = new Promise((resolve, reject) => {
        resolve('outer promise');
    });
    
    
    // 异步函数
    async function asFn() {
        let res = await isAsync();
        console.log(res);
    }
    asFn();
    
    promise.then((value) => {
        console.log(value);
    });
    // 执行顺序
    // isAsync start
    // outer promise
    // isAsync end

上面的例子，    外部的promise是在跳出异步函数之后推入队列的，并且执行顺序是在isAsync之前，此时有两种可能性：

1.跳出异步函数，将外部的promise推入队列，然后执行，再回到异步函数，将isAsync推入队列，执行isAsync；

2.跳出异步函数，将外部的promise推入队列，不执行，回到异步函数，将isAsync推入队列，顺序执行promise队列。

那么究竟是哪种情况呢？我们来思考一下。

我们把isAsync改成同步函数，如果按照1的执行顺序，应该是外部的    promise执行在await得到同步函数值之前；如果是2的执行顺序，就应该是await先得到同步函数的值，之后才会执行外部的promise。

// 这里改成同步函数
    function isAsync() {
        console.log('isAsync start');
        return 'isAsync end';
    }
    
    let promise = new Promise((resolve, reject) => {
        resolve('outer promise');
    });
    promise.then((value) => {
        console.log(value);
    });
    
    // 异步函数
    async function asFn() {
        let res = await isAsync();
        console.log(res);
    }
    asFn();
    // 输出顺序
    // isAsync start  
    // isAsync end
    // outer promise

可见此时`await`先得到同步函数的值，之后才执行了外部的`promise`。从而说明是按照上述2的顺序执行的。

**也就是说，在跳出异步函数之后才推入队列的`promise`，其执行时机是在回到异步函数之后。**

[await]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/5b3e3b15292943678aef0cb0f38a750c.png