如何使用 ECMAScript 2017 (ES8) 中的异步函数（async/await）
随着前端应用场景的不断增加，异步编程成为越来越受欢迎的一种方式。异步编程可以避免页面假死，提高性能，优化用户体验。其中，异步函数是 ECMAScript 2017 (ES8) 中最为受欢迎，最为实用的新特性之一。本文将详细介绍如何使用 ES8 中的异步函数。
一、异步函数简介
ES8 中新增了异步函数(async/await)，可以更加方便地编写异步代码。异步函数是基于 Promise 的语法糖，它让异步代码的编写方式更加简洁、易读、易维护。异步函数提供了更为清晰和易于理解的错误处理方式，避免了使用 Promise 的回调地狱，提升了异步编程的可读性，同时利用函数的拆分提高了代码的重用率。
二、异步函数的基本使用
异步函数通过 async 关键字定义，其返回值是一个 Promise 对象。async 关键字用来表示一个函数是异步函数，而 await 关键字用于等待 Promise 对象的处理结果。
例子1：
async function getUserInfo() {
let result = await axios.get('/getUserInfo')
return result.data
}
getUserInfo().then(result => {
console.log(result)
})这个例子中我们用 async 关键字修饰了函数 getUserInfo，在函数体内部，我们使用 await 关键字等待 Promise 对象的完成。axios.get('/getUserInfo') 返回的是一个 Promise 对象，我们通过 await 获取到这个 Promise 对象的值。得到数据后，我们在函数体内部将其打印出来，同时将获取到的数据返回给用户。
例子2：
-- -------------------- ---- ------- ----- -------- ------------- - --- ---- - ----- ------------------------- --- ----- - ----- ------------------------------------- --- -------- - ----- ---------------------------------------- ------ - --------- ----- ------ -------- - - ------------------------- -- - ------------------- --
通过这个例子，我们通过 async/await 实现了异步代码的顺序执行。getUserInfo 函数内部，我们使用了三次 await 命令，这三次操作的先后顺序能够保证正确的执行。
三、错误处理的方式
如果异步函数中出现了错误，我们可以使用 try...catch 来处理。
例子3：
async function getUserInfo() {
try {
let result = await axios.get('/getUserInfo')
return result.data
} catch (error) {
console.error(error)
}
}在这个例子中，try...catch 能够捕获异步函数中的错误，并将其打印到控制台上。
四、Promise.all()
异步函数的一个常见用途是调用多个 API，使用 Promise.all() 可以让异步操作并行执行。
例子4：
-- -------------------- ---- ------- ----- -------- --------- - --- --------------- - ------------------------- --- ------------ - -------------------------- --- --------------- - ------------------------- --- ---------- ------ --------- - ----- ----------------------------- ------------- ----------------- ------ ---------- ------ --------- - ----------------------- -- - ------------------- --
在这个例子中，我们首先定义了三个 Promise 对象用来获取用户信息、帖子列表和评论列表。Promise.all() 方法能够将这些操作并行执行，我们使用 await 关键字等待所有 Promise 对象的成功返回，并返回获取到的数据。
五、forEach() 中不支持 await
在使用 async/await 进行数组操作时，需要注意 forEach() 方法中不支持 await 操作，因为 forEach() 方法没有办法中断循环。
例子5：
-- -------------------- ---- -------
----- -------- ------------------------ -
--- --------- - --
--------------------- ---- -- -
--- -------- - ----- -------------------------------
------------------------
--
------ ---------
-
------------------- -- -------------------- -- -
----------------------
--上面的代码中，我们使用了 forEach() 方法来遍历 userIds 数组，并通过 await 关键字获取每个用户的名称。但是在该函数最终的返回结果中，usernames 数组仍然是空的。这是因为 forEach() 方法不会等待异步操作的结束，无法正确地执行。
我们应该使用 for...of 循环来遍历数组并执行异步操作。
例子6：
-- -------------------- ---- -------
----- -------- ------------------------ -
--- --------- - --
--- ---- -- -- -------- -
--- -------- - ----- -------------------------------
------------------------
-
------ ---------
-
------------------- -- -------------------- -- -
----------------------
--在这个例子中，我们使用 for...of 循环来遍历数组，并使用 await 关键字等待异步请求中获取的每个用户名并放到 usernames 中。
六、总结
异步编程是Web开发中的重要技术，异步函数为异步编程带来了便利和可读性的提高。本文详细介绍了异步函数的基本使用、错误处理、Promise.all()、forEach() 中不支持 await 等内容。希望可以帮助前端开发人员更好地理解和应用这项技术，从而提高Web开发的质量和效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6473238d968c7c53b00a3da7