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

前言

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

• async/await 是一种编写异步代码的新方法。之前异步代码的方案是回调和 promise。
• async/await 是建立在 promise 的基础上。
• async/await 像 promise 一样，也是非阻塞的。
• 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 async
Promise {[[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");});//关键点2
promise.then((val)=> console.log(val));

console.log("test end...")

输出结果：

test start...
执行testSometing
promise start..
test end...
testSometing
执行testAsync
promise
hello async
testSometing hello async

当test函数执行到

const v1 = await testSometing()；

的时候，会先执行testSometing这个函数打印出“执行testSometing”的字符串，然后因为await会让出线程就会区执行后面的

var promise = new Promise((resolve)=> { console.log("promise
start.."); resolve("promise");});//关键点2

然后打印出“promise start..”接下来会把返回的这promise放入promise队列（Promise的Job Queue），继续执行打印“test end...”，等本轮事件循环执行结束后，又会跳回到async函数中（test函数），等待之前await 后面表达式的返回值，因为testSometing 不是async函数，所以返回的是一个字符串“testSometing”，test函数继续执行，执行到

const v2 = await testAsync();

和之前一样又会跳出test函数，执行后续代码，此时事件循环就到了promise的队列，执行promise.then((val)=> console.log(val));then后面的语句，之后和前面一样又跳回到test函数继续执行。

这个就是在async/await 函数之后js的执行顺序，我们再看一个列子把testSometing函数前面加上async

async 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();
 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");});//3
promise.then((val)=> console.log(val));

console.log("test end...")

输出结果：

test start...
执行testSometing
promise start..
test end...
promise
testSometing
执行testAsync
hello async
testSometing hello async

和上一个例子比较发现promise.then((val)=> console.log(val));先与console.log(v1);执行了，原因是因为现在testSometing函数加了async，返回的是一个Promise对象要要等它resolve，所以将当前Promise推入队列，所以会继续跳出test函数执行后续代码。之后就开始执行promise的任务队列了，所以先执行了promise.then((val)=> console.log(val));因为这个Promise对象先推入队列；

总结

写到这里大家应该已经清楚了使用async/await进行异步操作时js的执行顺序，在研究过程中还发现了js的任务队列执行顺序的问题，就下次再述。如果大家对有什么意见或建议可以指出。本篇是我第一次发布文章，希望大家不吝赐教。

好了，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对的支持。

# js  # async  # await  # JS中async/await实现异步调用的方法  # JavaScript中的await/async的作用和用法  # 在JS循环中使用async/await的方法  # JS中的async与await怎么使用  # JS循环中正确使用async、await的姿势分享  # js异步之async和await实现同步写法  # JavaScript async/await的使用场景与规范  # 的是  # 返回值  # 又会  # 是一个  # 就会  # 一遍  # 列子  # 会把  # 这篇文章  # 跳回  # 先看  # 本轮  # 会先  # 有什么  # 是一种  # 是因为  # 好了  # 不吝赐教  # 基础上  # 才会 

相关文章： 建站之星在线版空间：自助建站+智能模板一键生成方案  如何零基础在云服务器搭建WordPress站点？  香港服务器租用费用高吗？如何避免常见误区？  Android使用GridView实现日历的简单功能  已有域名如何快速搭建专属网站？  如何用PHP快速搭建CMS系统？  黑客入侵网站服务器的常见手法有哪些？  建站主机系统SEO优化与智能配置核心关键词操作指南  建站之星如何修改网站生成路径？  如何高效搭建专业期货交易平台网站？  公众号网站制作网页,微信公众号怎么制作？  如何快速生成凡客建站的专业级图册？  广州网站设计制作一条龙,广州巨网网络科技有限公司是干什么的？  开封网站制作公司,网络用语开封是什么意思？  网站视频制作书签怎么做,ie浏览器怎么将网站固定在书签工具栏？  ,如何利用word制作宣传手册？  建站之星如何快速更换网站模板？  建站之星五站合一营销型网站搭建攻略，流量入口全覆盖优化指南  h5网站制作工具有哪些,h5页面制作工具有哪些？  c++ stringstream用法详解_c++字符串与数字转换利器  如何获取上海专业网站定制建站电话？  建站之星伪静态规则如何正确配置？  如何选择高效便捷的WAP商城建站系统？  如何在建站宝盒中设置产品搜索功能？  网站专业制作公司,网站编辑是做什么的？好做吗？工作前景如何？  建站主机类型有哪些？如何正确选型  山东网站制作公司有哪些,山东大源集团官网？  建站之星安装路径如何正确选择及配置？  中山网站推广排名,中山信息港登录入口？  厦门模型网站设计制作公司,厦门航空飞机模型掉色怎么办？  零服务器AI建站解决方案：快速部署与云端平台低成本实践  哪家制作企业网站好,开办像阿里巴巴那样的网络公司和网站要怎么做？  天河区网站制作公司,广州天河区如何办理身份证？需要什么资料有预约的网站吗？  岳西云建站教程与模板下载_一站式快速建站系统操作指南  如何优化Golang Web性能_Golang HTTP服务器性能提升方法  建站之星24小时客服电话如何获取？  网站制作难吗安全吗,做一个网站需要多久时间？  建站之星价格显示格式升级，你的预算足够吗？  IOS倒计时设置UIButton标题title的抖动问题  建站主机数据库如何配置才能提升网站性能？  网站制作大概多少钱一个,做一个平台网站大概多少钱？  如何通过虚拟主机快速完成网站搭建？  网站制作专业公司有哪些,如何制作一个企业网站，建设网站的基本步骤有哪些？  如何在宝塔面板创建新站点？  盘锦网站制作公司,盘锦大洼有多少5G网站？  定制建站价位费用解析与套餐推荐全攻略  c# Task.Yield 的作用是什么 它和Task.Delay(1)有区别吗  网站制作中优化长尾关键字挖掘的技巧,建一个视频网站需要多少钱？  如何实现建站之星域名转发设置？  建站主机SSH密钥生成步骤及常见问题解答？