JS async与await异步编程详解及三大使用陷阱

async与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看似暂停了函数的执行，但在等待期间，JavaScript依然可以处理其他任务。

这是因为await底层依赖于Promise和事件循环（event loop）机制来实现非阻塞等待。

await使用的三大陷阱及解决方案

在使用await时，需要注意以下陷阱：

第一个陷阱：例如，分别对两个异步操作使用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()

第二个陷阱：

如果在循环中执行异步操作，不能直接调用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循环会等待所有异步操作完成后，才会继续向后执行。

第三个陷阱：

不能在全局作用域或普通函数中直接使用await关键字。

await只能用在异步函数（async function）中。

如果需要在最外层使用await，必须先定义一个异步函数：

使用async和await可以让我们写出更清晰、更容易理解的异步代码。

参考视频教程：https://www.bilibili.com/video/BV1WP4y187Tu/?spm_id_from=333.337.search-card.all.click&vd_source=ee0c6018997dd78957dfe36225950357

到此这篇关于async与await异步编程的文章就介绍到这了，更多相关async与await异步编程内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！