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

前言

虽然大家知道async/await，但是很多人对这个方法中内部怎么执行的还不是很了解，本文是我看了一遍技术博客理解 JavaScript 的 async/await（如果对async／await不熟悉可以先看下这篇文章）后拓展了一下，我理了一下await之后js的执行顺序，希望可以给别人解疑答惑，先简单介绍一下async／await。

async怎么处理返回值

async function testAsync() { return "hello async";}let result = testAsync();console.log(result)

输出结果：

Promise {[[PromiseStatus]]: "resolved", [[PromiseValue]]: "hello async"}

从结果中可以看到async函数返回的是一个promise对象，如果在函数中 return 一个直接量，async 会把这个直接量通过 Promise.resolve() 封装成 Promise 对象。

如果asyn函数没有返回值

async function testAsync1() { console.log("hello async");}let result1 = testAsync1();console.log(result1);

结果

hello asyncPromise {[[PromiseStatus]]: "resolved", [[PromiseValue]]: undefined}

结果返回Promise.resolve(undefined) 。

await做了什么处理

从字面意思上看await就是等待，await 等待的是一个表达式，这个表达式的返回值可以是一个promise对象也可以是其他值。

很多人以为await会一直等待之后的表达式执行完之后才会继续执行后面的代码，实际上await是一个让出线程的标志。await后面的函数会先执行一遍，然后就会跳出整个async函数来执行后面js栈（后面会详述）的代码。等本轮事件循环执行完了之后又会跳回到async函数中等待await

后面表达式的返回值，如果返回值为非promise则继续执行async函数后面的代码，否则将返回的promise放入promise队列（Promise的Job Queue）

async/await 执行顺序

先看一个例子

function testSometing() { console.log("执行testSometing"); return "testSometing";}async function testAsync() { console.log("执行testAsync"); return Promise.resolve("hello async");}async function test() { console.log("test start..."); const v1 = await testSometing();//关键点1 console.log(v1); const v2 = await testAsync(); console.log(v2); console.log(v1, v2);}test();var promise = new Promise((resolve)=> { console.log("promise start.."); resolve("promise");});//关键点2promise.then((val)=> console.log(val));console.log("test end...")

输出结果：