在 ES6 中使用 await 和 async
在 JavaScript 中，异步编程是非常常见的，而且由于 JavaScript 的单线程特性，它也非常重要。以前使用回调函数来处理异步任务，但是回调地狱的问题越来越明显，使得代码难以阅读和维护。ES6 引入了 Promise 作为一种解决方案，但是它没有解决所有的问题。ES7 中引入的 async / await 是 Promise 的语法糖，使得异步编程变得更加易读和易于维护。
async / await 简介
async / await 是一种基于 Promise 的语法糖，它使异步代码的写法更加类似于同步代码。async 函数是异步的，它会在执行时返回一个 Promise 对象。await 关键字只能用在 async 函数中，它等待 Promise 对象完成，然后返回 Promise 的结果。
使用 async / await
定义 async 函数
既然 async 是异步函数，那么我们就可以在函数中使用 await。为了演示 async / await 的使用，我们定义一个异步的函数 getPosts，它会利用 fetch 获取一些文章数据：
async function getPosts() {
const response = await fetch("https://jsonplaceholder.typicode.com/posts");
const data = await response.json();
return data;
}调用 async 函数
现在，我们来调用 getPosts 函数，并在控制台输出返回的文章数据。
getPosts().then(posts => console.log(posts));
Output
-- -------------------- ---- -------
-
-
--------- --
----- --
-------- ----- --- ------ -------- --------- --------- --------- ----- ---------------
------- ----- -- ------------------ ---
--
-
--------- --
----- --
-------- ---- --- ------
------- ---- ----- ------- ------------ ---- ---
--
-- ---
-async / await 的优势
代码可读性
async / await 使得代码具有更好的可读性和易于维护性。代码不再是一堆回调函数的嵌套，而是一个类似于同步函数的结构。使用 async / await，我们可以清楚地看到异步操作和它们的结果是如何被处理和使用的。
错误处理
async / await 使得错误处理变得容易。在 async 函数中，当一个 Promise 被拒绝时，它会抛出一个异常。这使得错误处理的结构更加清晰。在使用 await 关键字的时候，我们只需要在 try / catch 语句中捕获错误即可。这种结构比使用回调函数嵌套进行错误处理更加清晰。
顺序性
异步编程中最常见的问题之一是顺序性。当我们依赖异步操作的结果时，我们需要等待异步操作完成才能继续处理其他操作。async / await 解决了这个问题，它在同步的方式下等待异步操作完成，并在处理结果之前保持顺序性。
async / await 的局限性
await 语句必须在 async 函数中使用
await 语句只能在 async 函数中使用。这意味着，如果您希望在 await 调用之前或之后执行其他操作或逻辑，则必须将这些操作或逻辑放在另一个 async 函数中。这可以导致代码变得更加复杂。但是，这个问题可以通过 Promise 的其他方法来解决，例如 Promise.all。
不支持取消 Promise
async / await 不支持取消 Promise。这使得处理长时间运行的异步操作，如长时间的网络请求，变得更加困难。这种情况下，建议使用其他解决方案，如 RxJS。
可能会导致性能问题
如果程序中有大量的 async / await 函数，而这些函数需要等待许多 Promise，这可能会导致性能问题。在这种情况下，您应该仔细考虑您的代码结构和性能瓶颈，并尝试使用其他解决方案来解决这个问题。例如，您可以使用 Promise 的 catch 方法来处理 Promise 拒绝的情况，而不是使用 try / catch 语句。
结论
使用 async / await 可以使得异步编程更加容易和可读，尤其是在处理序列操作时。它也带来了一些局限性，您需要根据您的代码结构和需求来选择适当的解决方案。在您的代码基础上使用 async / await，可以使代码结构变得更加清晰，易于维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6735be810bc820c582503aac