这篇“JS中的async与await异步编程及await使用陷阱源码分析”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“JS中的async与await异步编程及await使用陷阱源码分析”文章吧。
ECMA2017中新加入了两个关键字async与await
简单来说它们是基于promise之上的的语法糖，可以让异步操作更加地简单明了
首先我们需要用async关键字，将函数标记为异步函数
async function f() {
}
f()异步函数就是指：返回值为promise对象的函数
比如之前用到的fetch()就是一个异步函数，返回的是promise
在异步函数中，我们可以调用其他的异步函数，不过我们不再需要使用then，而是使用一个await。
await会等待Promise完成之后直接返回最终结果
所以这里的response已经是一个服务器返回的响应数据了
async function f() {
const response = await fetch("http://....")
}
f()虽然await看上去会暂停函数的执行，但在等待的过程中，js同样可以处理其他的任务
这是因为await底层是基于promise与事件循环（event loop）机制实现的
await使用时的陷阱：
1、第一个陷阱
比如：我们分别去await这两个异步操作
async function f() {
const a = fetch("http://..../post/1")
const b = fetch("http://..../post/2")
}
f()虽然不存在逻辑错误
但这样会打破这两个fetch()操作的并行
因为我们会等到第一个任务执行完成之后才开始执行第二个任务
这里更高效的方法是将所有的Promise用Promise.all组合起来，然后再去await：
修改之后的执行效率会直接提升一倍
async function f() {
const promiseA = fetch("http://..../post/1")
const promiseB = fetch("http://..../post/2")
const [a, b] = await Promise.all([promiseA,promiseB])
}
f()2、第二个陷阱
如果我们需要在循环中执行异步操作，是不能够直接调用forEach或者map这一类方法的，尽管我们在回调函数中写了await也不行。
因为这里的forEach会立即返回，它并不会等到所有的异步操作都执行完毕
async function f() {
[1,2,3].forEach(async (i) => {
await someAsyncOperation();
})
console.log("done")
}
f()如果我们希望等待循环中的异步操作都一一完成之后才继续执行
我们应当使用传统的for循环
async function f() {
for( let i of [1,2,3]){
await someAsyncOperation();
}
console.log("done")
}
f()如果我们希望所有的程序并发执行，一种更炫酷的写法就是使用for await
这里的for循环依然会等到所有的异步操作都完成之后才会继续向后执行
3、第三个陷阱
我们不能在全局或者普通函数中直接使用await关键字
await只能用在异步函数（async function）中
如果我们想要在最外层中使用await，那么需要先定义一个异步函数：
使用await async可以让我们写出更清晰，更容易理解的异步代码
以上就是关于“JS中的async与await异步编程及await使用陷阱源码分析”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注捷杰建站行业资讯频道。
本站采用系统自动发货方式，付款后即出现下载入口，如有疑问请咨询在线客服！
售后时间：早10点 - 晚11:30点
服务热线 19970861797
返回顶部
