你不知道的 async、await 魔鬼细节

最新推荐文章于 2024-11-14 10:16:35 发布
最新推荐文章于 2024-11-14 10:16:35 发布
阅读量102 收藏 1
点赞数 1
文章标签： css css3 html 前端 html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/china_coding/article/details/129680237
版权

0、前言

关于promise、async/await的使用相信很多小伙伴都比较熟悉了，但是提到事件循环机制输出结果类似的题目，你敢说都会？

图片.png

试一试？

🌰1：

async function async1 () {
    await new Promise((resolve, reject) => {
        resolve()
    })
    console.log('A')
}
​
async1()
​
new Promise((resolve) => {
    console.log('B')
    resolve()
}).then(() => {
    console.log('C')
}).then(() => {
    console.log('D')
})
​
// 最终结果👉: B A C D
复制代码

🌰2：

async function async1 () {
    await async2()
    console.log('A')
}
​
async function async2 () {
    return new Promise((resolve, reject) => {
        resolve()
    })
}
​
async1()
​
new Promise((resolve) => {
    console.log('B')
    resolve()
}).then(() => {
    console.log('C')
}).then(() => {
    console.log('D')
})
​
// 最终结果👉: B C D A
复制代码

❓基本一样的代码为什么会出现差别，话不多说👇

1、async 函数返回值

在讨论 await 之前，先聊一下 async 函数处理返回值的问题，它会像 Promise.prototype.then 一样，会对返回值的类型进行辨识。

👉根据返回值的类型，引起 js引擎 对返回值处理方式的不同

📑结论：async函数在抛出返回值时，会根据返回值类型开启不同数目的微任务

  • return结果值：非thenable、非promise(不等待)
  • return结果值：thenable(等待 1个then的时间)
  • return结果值：promise(等待 2个then的时间)

🌰1：

async function testA () {
    return 1;
}
​
testA().then(() => console.log(1));
Promise.resolve()
    .then(() => console.log(2))
    .then(() => console.log(3));
​
// (不等待)最终结果👉: 1 2 3
复制代码

🌰2：

async function testB () {
    return {
        then (cb) {
            cb();
        }
    };
}
​
testB().then(() => console.log(1));
Promise.resolve()
    .then(() => console.log(2))
    .then(() => console.log(3));
​
// (等待一个then)最终结果👉: 2 1 3
复制代码

🌰3：

async function testC () {
    return new Promise((resolve, reject) => {
        resolve()
    })
}

testC().then(() => console.log(1));
Promise.resolve()
    .then(() => console.log(2))
    .then(() => console.log(3));
    
// (等待两个then)最终结果👉: 2 3 1




async function testC () {
    return new Promise((resolve, reject) => {
        resolve()
    })
} 

testC().then(() => console.log(1));
Promise.resolve()
    .then(() => console.log(2))
    .then(() => console.log(3))
    .then(() => console.log(4))

// (等待两个then)最终结果👉: 2 3 1 4
复制代码

看了这三个🌰是不是对上面的结论有了更深的认识？

稍安勿躁，来试试一个经典面试题👇

async function async1 () {
    console.log('1')
    await async2()
    console.log('AAA')
}
​
async function async2 () {
    console.log('3')
    return new Promise((resolve, reject) => {
        resolve()
        console.log('4')
    })
}
​
console.log('5')
​
setTimeout(() => {
    console.log('6')
}, 0);
​
async1()
​
new Promise((resolve) => {
    console.log('7')
    resolve()
}).then(() => {
    console.log('8')
}).then(() => {
    console.log('9')
}).then(() => {
    console.log('10')
})
console.log('11')
​
// 最终结果👉: 5 1 3 4 7 11 8 9 AAA 10 6
复制代码

👀做错了吧？

哈哈没关系，送一篇关于JS的事件循环机制秘籍文章：JS的事件执行机制

步骤拆分👇：

  1. 先执行同步代码，输出5

  2. 执行setTimeout，是放入宏任务异步队列中

  3. 接着执行async1函数，输出1

  4. 执行async2函数，输出3

  5. Promise构造器中代码属于同步代码，输出4

    async2函数的返回值是Promise，等待2个then后放行，所以AAA暂时无法输出

  6. async1函数暂时结束，继续往下走，输出7

  7. 同步代码，输出11

  8. 执行第一个then，输出8

  9. 执行第二个then，输出9

  10. 终于等到了两个then执行完毕，执行async1函数里面剩下的，输出AAA

  11. 再执行最后一个微任务then，输出10

  12. 执行最后的宏任务setTimeout，输出6

❓是不是豁然开朗，欢迎点赞收藏！

2、await 右值类型区别

2.1、非 thenable

🌰1：

async function test () {
    console.log(1);
    await 1;
    console.log(2);
}
​
test();
console.log(3);
// 最终结果👉: 1 3 2
复制代码

🌰2：

function func () {
    console.log(2);
}
​
async function test () {
    console.log(1);
    await func();
    console.log(3);
}
​
test();
console.log(4);
​
// 最终结果👉: 1 2 4 3
复制代码

🌰3：

async function test () {
    console.log(1);
    await 123
    console.log(2);
}
​
test();
console.log(3);
​
Promise.resolve()
    .then(() => console.log(4))
    .then(() => console.log(5))
    .then(() => console.log(6))
    .then(() => console.log(7));
​
// 最终结果👉: 1 3 2 4 5 6 7
复制代码

Note:

await后面接非 thenable 类型，会立即向微任务队列添加一个微任务then，但不需等待

2.2、thenable类型

async function test () {
    console.log(1);
    await {
        then (cb) {
            cb();
        },
    };
    console.log(2);
}
​
test();
console.log(3);
​
Promise.resolve()
    .then(() => console.log(4))
    .then(() => console.log(5))
    .then(() => console.log(6))
    .then(() => console.log(7));
​
// 最终结果👉: 1 3 4 2 5 6 7
复制代码

Note:

await 后面接 thenable 类型，需要等待一个 then 的时间之后执行

2.3、Promise类型

async function test () {
    console.log(1);
    await new Promise((resolve, reject) => {
        resolve()
    })
    console.log(2);
}
​
test();
console.log(3);
​
Promise.resolve()
    .then(() => console.log(4))
    .then(() => console.log(5))
    .then(() => console.log(6))
    .then(() => console.log(7));
​
// 最终结果👉: 1 3 2 4 5 6 7
复制代码

❓为什么表现的和非 thenable 值一样呢？为什么不等待两个 then 的时间呢？

Note:

  • TC 39(ECMAScript标准制定者) 对await 后面是 promise 的情况如何处理进行了一次修改，移除了额外的两个微任务，在早期版本，依然会等待两个 then 的时间
  • 掘金上有大佬翻译了官方解释：更快的 async 函数和 promises，但在这次更新中并没有修改 thenable 的情况

这样做可以极大的优化 await 等待的速度👇

async function func () {
    console.log(1);
    await 1;
    console.log(2);
    await 2;
    console.log(3);
    await 3;
    console.log(4);
}
​
async function test () {
    console.log(5);
    await func();
    console.log(6);
}
​
test();
console.log(7);
​
Promise.resolve()
    .then(() => console.log(8))
    .then(() => console.log(9))
    .then(() => console.log(10))
    .then(() => console.log(11));
​
// 最终结果👉: 5 1 7 2 8 3 9 4 10 6 11
复制代码

Note：

await 和 Promise.prototype.then 虽然很多时候可以在时间顺序上能等效，但是它们之间有本质的区别。

  • test 函数中的 await 会等待 func 函数中所有的 await 取得 恢复函数执行 的命令并且整个函数执行完毕后才能获得取得 恢复函数执行的命令；
  • 也就是说，func 函数的 await 此时不能在时间的顺序上等效 then，而要等待到 test 函数完全执行完毕；
  • 比如这里的数字6很晚才输出，如果单纯看成then的话，在下一个微任务队列执行时6就应该作为同步代码输出了才对。

所以我们可以合并两个函数的代码👇

async function test () {
    console.log(5);
​
    console.log(1);
    await 1;
    console.log(2);
    await 2;
    console.log(3);
    await 3;
    console.log(4);
    await null;
    
    console.log(6);
}
​
test();
console.log(7);
​
Promise.resolve()
    .then(() => console.log(8))
    .then(() => console.log(9))
    .then(() => console.log(10))
    .then(() => console.log(11));
​
// 最终结果👉: 5 1 7 2 8 3 9 4 10 6 11
复制代码

因为将原本的函数融合，此时的 await 可以等效为 Promise.prototype.then，又完全可以等效如下代码👇

async function test () {
    console.log(5);
    console.log(1);
    Promise.resolve()
        .then(() => console.log(2))
        .then(() => console.log(3))
        .then(() => console.log(4))
        .then(() => console.log(6))
}
​
test();
console.log(7);
​
Promise.resolve()
    .then(() => console.log(8))
    .then(() => console.log(9))
    .then(() => console.log(10))
    .then(() => console.log(11));
​
// 最终结果👉: 5 1 7 2 8 3 9 4 10 6 11
复制代码

以上三种写法在时间的顺序上完全等效，所以你 完全可以将 await 后面的代码可以看做在 then 里面执行的结果，又因为 async 函数会返回 promise 实例，所以还可以等效成👇

async function test () {
    console.log(5);
    console.log(1);
}
​
test()
    .then(() => console.log(2))
    .then(() => console.log(3))
    .then(() => console.log(4))
    .then(() => console.log(6))
​
console.log(7);
​
Promise.resolve()
    .then(() => console.log(8))
    .then(() => console.log(9))
    .then(() => console.log(10))
    .then(() => console.log(11));
​
// 最终结果👉: 5 1 7 2 8 3 9 4 10 6 11
复制代码

可以发现，test 函数全是走的同步代码...

所以👉：async/await 是用同步的方式，执行异步操作

3、🌰

🌰1：

async function async2 () {
    new Promise((resolve, reject) => {
        resolve()
    })
}
​
async function async3 () {
    return new Promise((resolve, reject) => {
        resolve()
    })
}
​
async function async1 () {
    // 方式一：最终结果：B A C D
    // await new Promise((resolve, reject) => {
    //     resolve()
    // })
​
    // 方式二：最终结果：B A C D
    // await async2()
​
    // 方式三：最终结果：B C D A
    await async3()
​
    console.log('A')
}
​
async1()
​
new Promise((resolve) => {
    console.log('B')
    resolve()
}).then(() => {
    console.log('C')
}).then(() => {
    console.log('D')
})
复制代码

大致思路👇：

  • 首先，async函数的整体返回值永远都是Promise，无论值本身是什么
  • 方式一：await的是Promise，无需等待
  • 方式二：await的是async函数，但是该函数的返回值本身是非thenable，无需等待
  • 方式三：await的是async函数，且返回值本身是Promise，需等待两个then时间

🌰2：

function func () {
    console.log(2);
​
    // 方式一：1 2 4  5 3 6 7
    // Promise.resolve()
    //     .then(() => console.log(5))
    //     .then(() => console.log(6))
    //     .then(() => console.log(7))
​
    // 方式二：1 2 4  5 6 7 3
    return Promise.resolve()
        .then(() => console.log(5))
        .then(() => console.log(6))
        .then(() => console.log(7))
}
​
async function test () {
    console.log(1);
    await func();
    console.log(3);
}
​
test();
console.log(4); 
复制代码

步骤拆分👇：

  • 方式一：

    • 同步代码输出1、2，接着将log(5)处的then1加入微任务队列，await拿到确切的func函数返回值undefined，将后续代码放入微任务队列(then2，可以这样理解)
    • 执行同步代码输出4，到此，所有同步代码完毕
    • 执行第一个放入的微任务then1输出5，产生log(6)的微任务then3
    • 执行第二个放入的微任务then2输出3
    • 然后执行微任务then3，输出6，产生log(7)的微任务then4
    • 执行then4，输出7

  • 方式二：

    • 同步代码输出1、2，await拿到func函数返回值，但是并未获得具体的结果(由Promise本身机制决定)，暂停执行当前async函数内的代码(跳出、让行)
    • 输出4，到此，所有同步代码完毕
    • await一直等到Promise.resolve().then...执行完成，再放行输出3

方式二没太明白❓

继续👇

function func () {
    console.log(2);
​
    return Promise.resolve()
        .then(() => console.log(5))
        .then(() => console.log(6))
        .then(() => console.log(7))
}
​
async function test () {
    console.log(1);
    await func()
    console.log(3);
}
​
test();
console.log(4);
​
new Promise((resolve) => {
    console.log('B')
    resolve()
}).then(() => {
    console.log('C')
}).then(() => {
    console.log('D')
})
​
// 最终结果👉: 1 2 4    B 5 C 6 D 7 3
复制代码

还是没懂？

继续👇

async function test () {
    console.log(1);
    await Promise.resolve()
        .then(() => console.log(5))
        .then(() => console.log(6))
        .then(() => console.log(7))
    console.log(3);
}
​
test();
console.log(4);
​
new Promise((resolve) => {
    console.log('B')
    resolve()
}).then(() => {
    console.log('C')
}).then(() => {
    console.log('D')
})
​
// 最终结果👉: 1 4    B 5 C 6 D 7 3
复制代码

Note:

综上，await一定要等到右侧的表达式有确切的值才会放行，否则将一直等待(阻塞当前async函数内的后续代码)，不服看看这个👇

  • function func () {
    return new Promise((resolve) => {
        console.log('B')
        // resolve() 故意一直保持pending
    })
}
​
async function test () {
    console.log(1);
    await func()
    console.log(3);
}
​
test();
console.log(4);
// 最终结果👉: 1 B 4 (永远不会打印3)
​
​
// ---------------------或者写为👇-------------------
async function test () {
    console.log(1);
    await new Promise((resolve) => {
        console.log('B')
        // resolve() 故意一直保持pending
    })
    console.log(3);
}
​
test();
console.log(4);
// 最终结果👉: 1 B 4 (永远不会打印3)
复制代码

🌰3：

async function func () {
    console.log(2);
    return {
        then (cb) {
            cb()
        }
    }
}
​
async function test () {
    console.log(1);
    await func();
    console.log(3);
}
​
test();
console.log(4);
​
new Promise((resolve) => {
    console.log('B')
    resolve()
}).then(() => {
    console.log('C')
}).then(() => {
    console.log('D')
})
​
// 最终结果👉: 1 2 4 B C 3 D
复制代码

步骤拆分👇：

  • 同步代码输出1、2
  • await拿到func函数的具体返回值thenable，将当前async函数内的后续代码放入微任务then1(但是需要等待一个then时间)
  • 同步代码输出4、B，产生log(C)的微任务then2
  • 由于then1滞后一个then时间，直接执行then2输出C，产生log(D)的微任务then3
  • 执行原本滞后一个then时间的微任务then1，输出3
  • 执行最后一个微任务then3输出D

其它🌰：

setTimeout+Promise+Async输出顺序？很简单呀！

4、总结

async函数返回值

  • 📑结论：async函数在抛出返回值时，会根据返回值类型开启不同数目的微任务

    • return结果值：非thenable、非promise(不等待)
    • return结果值：thenable(等待 1个then的时间)
    • return结果值：promise(等待 2个then的时间)

await右值类型区别

  • 接非 thenable 类型，会立即向微任务队列添加一个微任务then，但不需等待

  • 接 thenable 类型，需要等待一个 then 的时间之后执行

  • 接Promise类型(有确定的返回值)，会立即向微任务队列添加一个微任务then，但不需等待

    • TC 39 对await 后面是 promise 的情况如何处理进行了一次修改，移除了额外的两个微任务，在早期版本，依然会等待两个 then 的时间

优质文章参考链接：

码字不易，欢迎点赞🚀🚀🚀

来源：https://juejin.cn/post/7194744938276323384
小明的学习圈子
关注
同步异步编程+promise全面解析+async/await
m0_50296879的博客
09-08 317
同步异步编程 首先，要从进程和线程中说起： 进程：一个程序[浏览器打开一个页面就是开辟一个进程] 线程：程序中具体做事情的 （ 一个进程中，会包含一到多个线程） 我们都知道，浏览器是多线程的： GUI渲染线程：渲染页面的 JS引擎线程：渲染和解析JS的 时间触发线程：监听DOM事件的触发 定时器触发线程：监听定时器是否到时间 异步HTTP请求线程：从服务器端获取资源信息/数据的 WebWorker等等 然后呢，利用多线程是可以实现“异步编程”的：就是同时做多件事情 “同步编程”：单线程，一次只能处理一件事
C# Task中的Func, Action, Async与Await的使用
aoyao9093的博客
10-08 764
在说Asnc和Await之前,先说明一下Func和Action委托, Task任务的基础的用法 1. Func Func是一种委托，这是在3.5里面新增的，2.0里面我们使用委托是用Delegate，Func位于System.Core命名空间下，使用委托可以提升效率，例如在反射中使用就可以弥补反射所损失的性能。Action<T>和Func<T,TResult>...
建议收藏!async ,await相关知识总结,适用于js基础不错的童鞋
业余前端的职业经历
04-22 672
早在很久之前就知道async和awiat的大名了,但我却一直对这个东西也算是不温不火吧; 最近在搞koa的时候 大量出现的 async和await把我搞得有点烦了; 我就单独抽出来 半天时间 好好来解决下整个async和await 可能有的童鞋知道 他是基于es6的promise基础上进行扩展了; 在讲解之前我们就来谈谈 promise的由来的历史吧; 虽然有点废话了 但助你理解async的还是有...
异步删除async await
qq_41438838的博客
01-05 270
异步删除async await
第十五节：深入理解async和await的作用及各种适用场景和用法
weixin_34195142的博客
07-02 302
一. 同步VS异步 1. 同步 VS 异步 VS 多线程 同步方法：调用时需要等待返回结果，才可以继续往下执行业务 异步方法：调用时无须等待返回结果，可以继续往下执行业务 开启新线程：在主线程之外开启一个新的线程去执行业务 同步方法和异步方法的本质区别： 调用时是否需要等待返回结果才能继续执行业务 2. 常见的异步方法（都以Async结尾） 　　① HttpClient类：Pos...
Promise 和async/await 的一些细节联系
weixin_46523071的博客
08-21 263
Promise 和async/await
ea-async：EA Async在JVM中实现async-await方法
02-03
EA Async在JVM中实现Async-Await方法。 它允许程序员以顺序的方式编写异步代码。 它在很大程度上受到.NET CLR上Async-Await的启发，有关更多信息，请参见进行。 谁应该使用它？ 应该使用EA Async编写非阻塞异步...
vue3 使用async await
10-31
在`setup`函数中，你可以使用`async/await`来处理异步操作，如数据获取或计算。 ```javascript import { ref } from 'vue' export default { setup() { const data = ref(null) async function fetchData() { ...
使用async await 封装 axios的方法
08-27
"使用async await 封装axios的方法" async await 是一种异步编程的方式，它可以将异步代码写得像同步代码一样，易于阅读和维护。axios 是一个流行的 HTTP 客户端库，用于发送 HTTP 请求。在 Vue 项目中，我们可以...
async/await 的理解和用法
热门推荐
qq_42941302的博客
10-23 16万+
async/await是什么 async/await 是ES7提出的基于Promise的解决异步的最终方案。 async async是一个加在函数前的修饰符，被async定义的函数会默认返回一个Promise对象resolve的值。因此对async函数可以直接then，返回值就是then方法传入的函数。 // async基础语法 async function fun0(){ console.log(1); return 1; } fun0().then(val=>{ conso
学习ES6非常棒的特性——Async / Await函数
前端疯
03-31 1867
## try/catch 在使用Async/Await前，我们可能这样写： const main = (paramsA, paramsB, paramsC, done) =&gt; { funcA(paramsA, (err, resA) =&gt; { if (err) return done(err) return funcB(paramsB, (err, resB...
node.js async/await 处理异常？
qq_26833853的博客
07-11 1094
一、我只是console一下，我不处理。 async function getData(){ const a = await someFunction().catch((error)=>console.log(error)); const b = await someOtherFunction().catch((error)=>console.log(error)); if...
C# 5.0中引入了async 和 await
weixin_33859665的博客
03-28 167
C# 5.0中引入了async 和 await。这两个关键字可以让你更方便的写出异步代码。 看个例子：   [csharp] view plaincopy   public class MyClass   {       public MyClass()       {           DisplayValue(); //这里不会阻塞          ...
第8章利用CSS制作导航菜单
KO2131855283的博客
11-12 1004
利用CSS为超链接重新设置样式，包括对a:link和a:visited这两个伪类的设置，以此来分别表示超链接未被访问和已被访问的状态，同时将其display属性设为block，这样就能把超链接变成块级元素，进而可以为超链接设置80像素的宽度，满足特定的页面布局需求。与此同时，针对大标题文字的 CSS 样式也要进行设定，这包括规定高度值，设置合适的行高，确定文字颜色（可依据设计风格选择不同色彩）以及文字的对齐方式（如居中对齐、左对齐等），以此来达到理想的视觉呈现效果，提升导航栏和标题的美观度与可读性。
第8章 利用CSS制作导航菜单.
w_wx8866的博客
11-11 691
我们在浏览网页的时候可以看见许多位于顶部的导航栏，供我们点击跳转。
css-50 Projects in 50 Days(4)
xwc999
11-14 97
【代码】css-50 Projects in 50 Days(4)
第八章习题
2301_81876587的博客
11-11 207
【代码】第八章习题。
常见的 CSS-in-JS 库
最新发布
jjsnc
11-14 122
后记 CSS-in-JS 优缺点。
js async await 使用细节
09-12
使用async/await关键字可以让我们以同步的方式编写异步代码。在使用async函数时，需要注意以下几点： 1. async函数本身会马上返回，不会阻塞当前线程，即使函数内部存在异步操作也是如此。这使得我们可以在异步操作进行的同时继续执行其他任务。 2. 在async函数内部，可以使用await关键字来等待一个异步操作的完成。await关键字后面应该跟着一个返回Promise对象的表达式。在遇到await关键字时，函数的执行会被暂停，直到该Promise对象变为resolved状态并返回结果。然后，函数会继续执行。 3. 在使用await关键字时，需要将其放在一个async函数中，因为只有在async函数内部才能使用await关键字。 4. await关键字只能在异步函数中使用，不能在普通函数或顶层代码中使用。 5. async函数总是返回一个Promise对象，该Promise对象的状态与async函数内部返回的值相关联。如果async函数内部没有显式返回任何值，那么它将返回一个resolved状态的Promise对象，其值为undefined。 总结来说，async/await关键字可以使异步代码更加简洁易读，但需要注意的是，await关键字只能在async函数中使用，而且async函数本身是非阻塞的。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值