在 JavaScript 中，异步编程是一种常见的编程方式，它可以让我们在执行耗时操作时不会阻塞主线程，从而提高程序的性能和响应速度。但是，异步编程也带来了很多问题，比如回调地狱、代码难以阅读和维护等等。为了解决这些问题，ES7 引入了 async/await，让异步编程变得更加简单和可读。
async/await 的简介
async/await 是 ES7 中新增的关键字，它们是基于 Promise 构建的语法糖。async 表示函数是异步的，而 await 表示需要等待异步操作完成后才能继续执行。使用 async/await 可以让我们写出更加简单和易于维护的异步代码。
使用 async/await 改进异步编程
在使用 async/await 之前，让我们先来看一下使用 Promise 实现异步编程的代码：
// javascriptcn.com 代码示例
function fetchData() {
return fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => {
console.log(data);
})
.catch(error => {
console.error(error);
});
}上面的代码使用了 Promise 来获取数据，但是代码比较冗长，而且需要使用 then 和 catch 来处理异步操作的结果。现在，让我们来使用 async/await 来改进这段代码：
// javascriptcn.com 代码示例
async function fetchData() {
try {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
console.log(data);
} catch (error) {
console.error(error);
}
}使用 async/await 可以让代码更加简洁和易于理解。在上面的代码中，我们使用了 try/catch 来处理异步操作的结果，而且不需要使用 then 和 catch 来处理 Promise。
async/await 的使用
使用 async/await 很简单，只需要在函数前面添加 async 关键字，并在需要等待异步操作完成的地方使用 await 关键字即可。下面是一个使用 async/await 的示例代码：
// javascriptcn.com 代码示例
async function fetchData() {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
return data;
}
fetchData().then(data => {
console.log(data);
}).catch(error => {
console.error(error);
});在上面的代码中，我们定义了一个 fetchData 函数，它使用了 async/await 来获取数据。在调用 fetchData 函数时，我们可以使用 then 和 catch 来处理异步操作的结果。
async/await 的注意事项
使用 async/await 时需要注意以下几点：
- async/await 只能用于异步函数中。
- 如果在异步函数中使用了 await，那么该函数会自动变成异步函数。
- await 只能在异步函数中使用。
- await 可以等待任何返回 Promise 的函数，比如 fetch、Promise.resolve、Promise.reject 等等。
- 如果在使用 await 时出现了错误，那么会抛出一个异常，需要使用 try/catch 来捕获异常。
总结
使用 async/await 可以让 JavaScript 的异步编程更加简单和易于维护。在使用 async/await 时，我们需要注意一些细节，比如只能用于异步函数中、await 只能在异步函数中使用等等。希望本文对你有所帮助，让你更好地掌握 async/await 的使用方法。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/657520eed2f5e1655de42ff9