引言
在 JavaScript 中，处理异步任务一直是前端开发中必不可少的内容。以往我们使用原生的 Promise，或是配合回调函数的方式来处理这些异步任务。但是在 ES2017（也就是ES8）中，新增了 async/await 语法，提供了一种更为简单、直观的处理异步任务的方式。
本文将详细介绍 async/await 的使用和相关注意事项，并提供相关示例代码，希望能够帮助大家更好地理解和应用 async/await。
Async/Await 的基本概念
async/await 是 ES2017 中新增的一种异步编程方式，是对 Promise 的扩展。它可以把异步操作转换成同步操作，使代码更加简洁易读。
其中 async 函数用来声明一个异步函数，它返回一个 Promise 对象，可以使用 then 方法进行链式调用；而 await 关键字用于等待一个 Promise 对象的执行，并返回其结果。如果 await 前面的异步操作出现错误，那么 await 将会抛出该错误，我们可以通过 try-catch 块来进行错误处理。
Async/Await 的使用方法
下面我们来看一下 async/await 的具体使用方法。
声明一个异步函数
要声明一个异步函数，需要在函数前面加上 async 关键字，如下所示：
async function foo() {
// ...
}或是使用箭头函数来声明 async 函数：
const bar = async () => {
// ...
}等待一个 Promise 对象
使用 await 关键字可以等待一个 Promise 对象的执行，从而获取其返回的结果。在使用 await 时，需要将其放在一个 async 函数中，如下所示：
async function getData() {
const result = await fetch('https://jsonplaceholder.typicode.com/users');
const data = await result.json();
console.log(data);
}在上面的代码中，我们使用了 fetch 函数来获取远程数据，并通过 await 等待 fetch 函数返回的 Promise 对象。当 fetch 返回的 Promise 对象 fulfilled 后，我们就可以调用该对象的 json 方法，获取到响应数据。
错误处理
如果 async 函数中出现错误，需要使用 try-catch 块来进行错误处理，如下所示：
// javascriptcn.com 代码示例
async function getData() {
try {
const result = await fetch('https://jsonplaceholder.typicode.com/users');
const data = await result.json();
console.log(data);
} catch (error) {
console.log(error);
}
}在上面的代码中，我们使用 try-catch 块来处理 fetch 函数和 json 方法可能会产生的错误。
并行执行多个异步操作
在上面的示例中，我们使用 await 来等待一个 Promise 对象的执行，并获取其返回结果。但我们也可以同时等待多个 Promise 对象的执行，如下所示：
// javascriptcn.com 代码示例
async function getData() {
const [users, posts] = await Promise.all([
fetch('https://jsonplaceholder.typicode.com/users'),
fetch('https://jsonplaceholder.typicode.com/posts')
]);
const usersData = await users.json();
const postsData = await posts.json();
console.log(usersData);
console.log(postsData);
}在上面的代码中，我们同时发起两个异步请求，并使用 Promise.all 将这两个异步请求包装成一个 Promise 对象。当两个异步请求都 fulfilled 后，我们可以通过解构赋值获取它们的返回结果，并进行相应的处理。
注意事项
使用 async/await 可以让我们的代码变得更加简洁易读，但是在使用时还需要注意以下几点：
async/await 只适用于 Promise 对象，不能用于普通的回调函数。
在使用 await 等待 Promise 对象时，必须放在 async 函数中，并且 await 只能等待 Promise 对象的执行，不能等待其他类型的对象。
await 关键字只能在 async 函数中使用。
async 函数总是返回一个 Promise 对象，如果返回了非 Promise 对象，将自动转换成 Promise 对象。
在 async 函数中使用 try-catch 块来处理异步操作的错误。
总结
本文中我们详细介绍了 async/await 异步方式的使用方法，并提供了示例代码以帮助大家更好地理解和应用 async/await。使用 async/await 可以让我们的代码变得更加简洁易读，但在实际应用中还需要注意相关的注意事项。希望本文能够帮助大家更好地处理前端开发中的异步操作。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/653384547d4982a6eb7115a2