在 JavaScript 中，异步编程一直是一个不可避免的话题。在过去，我们使用回调函数或者 Promise 来处理异步操作。但是，这些方法都有自己的缺点。回调函数容易导致回调地狱，而 Promise 也有一些限制。ES8 引入了 async/await，这是一种更好的异步编程方式。
async/await 简介
async/await 是一种基于 Promise 的异步编程方式。它使异步代码看起来像同步代码，从而更容易理解和维护。
async/await 实际上是 ES6 Promise 的一种语法糖，它让我们写异步代码的方式更加直观和简单。
async 函数
async 函数是一个返回 Promise 的函数。当函数执行时，它会返回一个 Promise 对象。如果函数中有异步操作，那么这个 Promise 对象会在异步操作完成后被 resolve。
下面是一个简单的 async 函数示例：
async function getData() {
const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
const data = await response.json();
return data;
}
getData().then(data => console.log(data));在这个例子中，我们使用 async 函数来获取 JSON 数据。首先，我们使用 fetch 函数获取数据。然后，我们使用 await 关键字等待 fetch 函数返回一个 Promise 对象。当 Promise 对象被 resolve 后，我们使用 await 关键字等待 response.json() 方法返回一个 Promise 对象。最后，我们返回从 JSON 数据中解析的数据。
await 关键字
await 关键字只能在 async 函数中使用。它暂停 async 函数的执行，直到 Promise 对象被 resolve。如果 Promise 对象被 reject，那么 await 表达式会抛出一个错误。
下面是一个简单的 await 示例：
async function getData() {
const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
const data = await response.json();
return data;
}在这个例子中，我们使用 await 关键字等待 fetch 函数返回一个 Promise 对象。当 Promise 对象被 resolve 后，我们使用 await 关键字等待 response.json() 方法返回一个 Promise 对象。
错误处理
在 async/await 中，错误处理方式与 Promise 相同。我们可以使用 try/catch 语句来捕获错误。
下面是一个简单的错误处理示例：
async function getData() {
try {
const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
const data = await response.json();
return data;
} catch (error) {
console.error(error);
}
}在这个例子中，我们使用 try/catch 语句来捕获错误。如果 Promise 对象被 reject，那么 await 表达式会抛出一个错误，我们可以使用 catch 语句来捕获这个错误。
并行执行多个异步操作
在 async/await 中，我们可以使用 Promise.all() 方法来并行执行多个异步操作。Promise.all() 方法接收一个包含 Promise 对象的数组，当所有 Promise 对象都被 resolve 后，Promise.all() 方法返回一个包含所有 Promise 对象返回值的数组。
下面是一个简单的并行执行多个异步操作示例：
async function getData() {
const [user, post] = await Promise.all([
fetch('https://jsonplaceholder.typicode.com/users/1').then(response => response.json()),
fetch('https://jsonplaceholder.typicode.com/posts/1').then(response => response.json())
]);
return { user, post };
}
getData().then(data => console.log(data));在这个例子中，我们使用 Promise.all() 方法来并行执行两个异步操作。当两个 Promise 对象都被 resolve 后，Promise.all() 方法返回一个包含两个 Promise 对象返回值的数组。我们使用解构赋值来获取 user 和 post。
总结
async/await 是一种更好的异步编程方式，它使异步代码看起来像同步代码，从而更容易理解和维护。async 函数返回一个 Promise 对象，await 关键字暂停 async 函数的执行，直到 Promise 对象被 resolve。在 async/await 中，我们可以使用 try/catch 语句来捕获错误，使用 Promise.all() 方法来并行执行多个异步操作。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65ace468add4f0e0ff676bc3