在前端开发中，异步编程是必不可少的技术实现。异步编程可以提高程序的执行效率，降低程序运行时的阻塞情况。而在 ES9 中，新增的 async 函数和 await 关键字提供了一种更加简洁、明确的异步编程方式。在本文中，我们将详细介绍如何在 ES9 中使用 async 函数和 await 关键字进行异步编程。
什么是 async 函数
Async 函数是一个关键字用来定义一个异步函数，这个函数将返回一个 Promise 对象。Async 函数可以通过 await 关键字，让异步操作的代码看上去就像同步操作的代码一样。
下面是一个简单的 async 函数的例子：
async function getData() {
const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
const json = await response.json();
return json;
}
getData().then(console.log);getData 函数使用了 async 关键字来定义一个异步函数，并在其中使用了 await 关键字来等待服务器返回数据，并将其转换为 json 格式。
什么是 await 关键字
await 是一个关键字，它可以暂停 async 函数的执行，等待 Promise 对象的结果。
下面是一个使用 await 关键字的例子：
async function getJson() {
const response = await fetch('/my-api-endpoint');
const json = await response.json();
return json;
}
getJson().then(console.log);在这个例子中，我们再次定义了一个 async 函数 getJson，这个函数通过 await 关键字与 fetch API 进行交互。当程序运行到 await fetch() 时，程序会暂停执行，直到 fetch API 返回一个 response 对象给 response 变量。当 fetch API 返回 response 对象时，await 关键字将解析这个 response 对象并将其传递给 response 变量。
总结
在 ES9 中使用 async 函数和 await 关键字进行异步编程，是一种更加简洁明确的异步编程方式。使用 async 函数和 await 关键字可以使异步代码看起来就像同步代码一样，从而提高代码的可读性和可维护性。
在实践中使用 async 函数和 await 关键字时，需要注意以下几点：
- async 函数一定会返回一个 Promise 对象。
- await 关键字只能在 async 函数内部使用。
- await 关键字会暂停程序的执行，直到 Promise 对象返回结果。
- 在 async 函数中，可以使用 try...catch 语句来处理 Promise 对象的错误情况。
下面是一个使用 try...catch 语句处理异步请求错误的例子：
// javascriptcn.com 代码示例
async function fetchData() {
try {
const response = await fetch('/my-api-endpoint');
const json = await response.json();
return json;
} catch (error) {
console.error(error);
}
}
fetchData().then(console.log);在这个例子中，我们将 fetch 请求和解析 json 数据的代码封装到一个异步函数中，并使用 try...catch 语句来处理 Promise 对象的错误情况。如果 Promise 对象返回了错误，catch 语句将会打印错误信息到控制台。
async 函数和 await 关键字在异步编程中的应用非常广泛，掌握这些知识点对于前端工程师来说非常重要。希望本文对你有所帮助，祝大家在编程的道路上越走越远！
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/654b58e37d4982a6eb5399eb