在前端开发中，异步编程是一个非常重要的话题。在 ECMAScript 2018 中，新增了 async 和 await 关键字，使得异步编程更加简洁明了。本文将详细解释这两个关键字的使用方法，并提供实际的代码示例。
异步编程简介
在 JavaScript 中，异步编程通常使用回调函数或者 Promise 对象来实现。回调函数会在异步操作完成后被调用，而 Promise 对象则提供了更加灵活的处理异步操作的方式。
但是，回调函数和 Promise 对象都存在一些问题。回调函数嵌套过多会导致代码难以维护，而 Promise 对象的 then 方法的链式调用也会使代码变得复杂。此外，Promise 对象的错误处理也需要额外的处理。
为了解决这些问题，ECMAScript 2018 引入了 async 和 await 关键字。
async 和 await 的使用方法
async 和 await 是 ECMAScript 2018 中的两个关键字，它们的作用是简化异步编程。async 用于定义一个异步函数，而 await 则用于等待异步操作的完成。
async
async 关键字用于定义一个异步函数，它可以包含多个异步操作。异步函数会返回一个 Promise 对象，当异步操作完成后，Promise 对象会被 resolve。以下是一个异步函数的示例：
async function fetchData() {
const response = await fetch('https://example.com/data');
const data = await response.json();
return data;
}在这个例子中，fetchData 函数会返回一个 Promise 对象。它首先使用 fetch 方法获取数据，然后使用 await 等待数据获取完成。当数据获取完成后，Promise 对象会被 resolve，返回获取到的数据。
await
await 关键字用于等待一个异步操作的完成。它只能在异步函数中使用。当遇到 await 关键字时，代码会暂停执行，直到异步操作完成。以下是一个使用 await 的示例：
async function fetchData() {
const response = await fetch('https://example.com/data');
const data = await response.json();
return data;
}在这个例子中，使用 await 等待 fetch 方法获取数据的完成。当数据获取完成后，继续执行后面的代码。
实战大全
1. 使用 async 和 await 获取数据
在这个示例中，我们将使用 async 和 await 关键字获取数据。我们将使用 fetch 方法获取一个 JSON 文件，并将其显示在页面上。以下是代码：
async function fetchData() {
const response = await fetch('https://example.com/data.json');
const data = await response.json();
const container = document.getElementById('container');
container.innerHTML = JSON.stringify(data);
}
fetchData();在这个代码中，我们定义了一个异步函数 fetchData，使用 await 等待获取数据的完成。当数据获取完成后，我们将其显示在页面上。
2. 使用 async 和 await 处理错误
在这个示例中，我们将使用 async 和 await 处理 Promise 对象的错误。我们将使用 fetch 方法获取一个 JSON 文件，并在获取失败时处理错误。以下是代码：
-- -------------------- ---- -------
----- -------- ----------- -
--- -
----- -------- - ----- ---------------------------------------
----- ---- - ----- ----------------
----- --------- - -------------------------------------
------------------- - ---------------------
- ------------ -
---------------------
-
-
------------在这个代码中，我们使用 try-catch 语句处理 Promise 对象的错误。当 Promise 对象发生错误时，代码会跳转到 catch 语句中，输出错误信息。
3. 使用 async 和 await 处理多个异步操作
在这个示例中，我们将使用 async 和 await 处理多个异步操作。我们将使用 Promise.all 方法等待多个异步操作的完成，并将它们的结果合并到一个数组中。以下是代码：
-- -------------------- ---- -------
----- -------- ----------- -
----- ----------- ---------- - ----- -------------
----------------------------------------
---------------------------------------
---
----- ------- ------ - ----- -------------
-----------------
----------------
---
----- --------- - -------------------------------------
------------------- - ------------------------- -----------
-
------------在这个代码中，我们使用 Promise.all 方法等待多个异步操作的完成。当所有异步操作完成后，将它们的结果合并到一个数组中，并将其显示在页面上。
总结
在 ECMAScript 2018 中，async 和 await 关键字使得异步编程更加简单明了。使用 async 和 await，可以避免回调函数嵌套和 Promise 对象的 then 方法的链式调用。此外，使用 try-catch 语句可以方便地处理 Promise 对象的错误。
在实际开发中，我们可以使用 async 和 await 处理异步操作，使得代码更加简洁易懂。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66179d03d10417a222787966