随着 Web 应用程序变得越来越复杂，处理异步操作变得越来越重要。在 JavaScript 中，异步操作通常使用回调函数或 Promise 进行处理。但是，这些方法可能会导致回调地狱或者过多的嵌套，使代码难以理解和维护。ES8 引入了 async/await 函数，使异步操作变得更加简单和直观。
Async 函数基础
async 函数是 ES8 中的一个新特性，它是一个返回 Promise 对象的函数。在函数内部，我们可以使用 await 关键字来等待 Promise 对象的解决。如果 Promise 对象解决了，await 表达式就会返回解决的值。如果 Promise 对象被拒绝，await 表达式就会抛出一个错误。
下面是一个简单的例子，展示了如何使用 async/await 函数来处理异步操作：
// javascriptcn.com 代码示例
async function getData() {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
return data;
}
getData().then(data => {
console.log(data);
}).catch(error => {
console.error(error);
});在这个例子中，getData 函数使用 fetch 函数来获取数据，并使用 await 关键字等待 Promise 对象的解决。如果 Promise 对象被解决，getData 函数会返回解决的值。如果 Promise 对象被拒绝，getData 函数会抛出一个错误。
处理多个异步操作
在实际开发中，我们通常需要处理多个异步操作。使用 Promise.all 方法可以等待多个 Promise 对象的解决，并在所有 Promise 对象解决后返回一个解决的 Promise 对象。我们可以结合 async/await 函数和 Promise.all 方法来处理多个异步操作。
下面是一个例子，展示了如何使用 async/await 函数和 Promise.all 方法来处理多个异步操作：
// javascriptcn.com 代码示例
async function getData() {
const [users, posts] = await Promise.all([
fetch('https://api.example.com/users').then(response => response.json()),
fetch('https://api.example.com/posts').then(response => response.json())
]);
return { users, posts };
}
getData().then(data => {
console.log(data);
}).catch(error => {
console.error(error);
});在这个例子中，getData 函数使用 Promise.all 方法等待两个 Promise 对象的解决，并在两个 Promise 对象解决后返回一个包含两个解决值的对象。
处理错误
在处理异步操作时，错误处理非常重要。使用 async/await 函数，我们可以使用 try/catch 语句来处理错误。如果 Promise 对象被拒绝，await 表达式就会抛出一个错误，我们可以使用 try/catch 语句来捕获这个错误。
下面是一个例子，展示了如何使用 try/catch 语句处理错误：
// javascriptcn.com 代码示例
async function getData() {
try {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
return data;
} catch (error) {
console.error(error);
}
}
getData().then(data => {
console.log(data);
});在这个例子中，getData 函数使用 try/catch 语句来处理 fetch 函数的错误。如果 fetch 函数返回一个拒绝的 Promise 对象，await 表达式就会抛出一个错误，我们可以使用 catch 语句来捕获这个错误。
总结
ES8 中的 async/await 函数使异步操作变得更加简单和直观。我们可以使用 async/await 函数来处理单个或多个异步操作，并使用 try/catch 语句来处理错误。使用 async/await 函数可以使我们的代码更加清晰和易于维护。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6556f53bd2f5e1655d152d58