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

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

 

证明
外部的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，其执行时机是在回到异步函数之后。