13518219792
这篇文章给大家介绍js的async和await该怎么理解，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。
创新互联建站服务项目包括莱阳网站建设、莱阳网站制作、莱阳网页制作以及莱阳网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，莱阳网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到莱阳省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！
一：概述
js异步的发展经历了回调，事件，Promise，生成器，async+await，总的来说是进化了很多版本，js是单线程的，为了支持异步引入的事件循环，里面还挺深的，最近刚好遇到一个js的问题，写了一个测试，记录一下。
首先，我们使用 async 关键字，把它放在函数声明之前，使其成为 async function。异步函数是一个知道怎样使用 await 关键字调用异步代码的函数。
await 只在异步函数里面才起作用。它可以放在任何异步的，基于 promise 的函数之前。它会暂停代码在该行上，直到 promise 完成，然后返回结果值。在暂停的同时，其他正在等待执行的代码就有机会执行了。上面是 MDN 上面定义的，看着有点懵，来段代码试一下。
二：调试
// 这个sleep返回一个Promise对象const sleep = function (time) {console.log(Date.parse(new Date()))return new Promise(function (resolve, reject) {setTimeout(function () {resolve('ok');}, time);})};// 这个是同步执行的代码function sleep_sync(numberMillis) {let now = new Date();const exitTime = now.getTime() + numberMillis;while (true) {now = new Date();if (now.getTime() > exitTime)return;}}// 用async修改的代码async function test() {console.log("call test")console.log("同步执行5s开始")sleep_sync(5000)console.log("同步执行5s结束")console.log("异步执行10秒开始")await sleep(10000)console.log("异步执行10秒结束")console.log("异步执行5秒开始")await sleep(5000)console.log("异步执行5秒结束")console.log("将要执行return")return "hello test"}// 调用async函数result_test = test()console.log(“主进程逻辑")result_test.then((r) => console.log(r))console.log("主进程逻辑1")
执行结果
call test同步执行5s开始------------- 执行了5s-------------同步执行5s结束异步执行10秒开始1595845827000主进程逻辑主进程逻辑1------------- 执行了大概10s-------------异步执行10秒结束异步执行5秒开始1595846947000-------------- 执行了5s--------------异步执行5秒结束将要执行returnhello test
分析一下（有错误的欢迎留言）：
执行的第一行代码
result_test = test()
调用 test 函数，进入 test 函数，test是由 async修饰的，在这个函数里代码分为2类，同步代码和异步代码，同步代码是不管 async 关键字的，肯定得执行，所以 sleep_sync 同步执行了 5s ，包括console.log都是同步代码。对应上面输出
完后紧接着是下面的代码
await sleep(10000)
先看sleep函数，先打印当前时间，完后创建Promise对象，Promise对象创建完后会立马执行的，完后await 和 return 都会造成 async 修饰的函数返回，所以就到了主进程了。当主进程打印完 ”主进程逻辑1“ 就没有代码可执行了。
接下来就到了 ”异步执行10秒结束“ 这个时间不一定是 10s，js是单线程的要是进程阻塞严重的话可能会大于 10s。
在 async 里面，await都是串行执行的，说以就执行完 10s 那个开始执行 5s 那个，完后再 return。
async函数返回的值都是 Promise，所以可以通过 then 获取到值。
关于js的async和await该怎么理解就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。
