如何在 ES9 中使用 async/await
在ES2017 (ES8) 中，我们看到了引入了 async/await 函数，开发人员现在可以使用这个令人兴奋的功能来编写异步代码，而不仅是使用回调、Promise 等方式。
在这篇文章中，我们将学习如何在 ES9 中使用 async/await，深入探讨它们的工作原理，以及如何在代码中集中使用它们来编写更好的代码。
理解 async/await
在 ES8 中，我们可以这样编写异步代码：
async function myFunction() {
let result = await someAsyncCall();
console.log(result);
}
myFunction();这段代码将运行一个异步函数，等待 Promise 返回结果，然后将结果存储在 result 变量中并打印到控制台上。这看起来很简单，但是当我们深入了解 async/await 的工作原理时，我们会看到它更为强大。
首先，我们需要知道 async/await 实际上是 Promise 的语法糖。async 函数返回一个 Promise，await 在等待 Promise 的解决或拒绝（resolve 或 reject）。
让我们看一个更复杂的示例，这将帮助我们更好地理解 async/await 的工作原理：
-- -------------------- ---- ------- ----- -------- ------------ - --- ------- - ----- ---------------- --------------------- --- ------- - ----- -------------------------- --------------------- --- ------- - ----- ----------------------- --------- --------------------- ------ -------- - ------------ ----------------- -- ------------------------- ------------ -- --------------------
在这个例子中，我们有三个异步调用，每个调用都是确定前面一个调用的结果的。在这里，await 关键字保证所有异步操作都按照正确的顺序解决。这使代码更容易编写和阅读，并且异步编程变得更加简单。
使用 async/await 的好处
下面是一些使用 async/await 的好处：
- 更好的可读性：代码结构更清晰，因为 async/await 代码看起来更像同步代码，这使得阅读它们变得更加容易。
- 更好的调试能力：处理错误更加容易，因为 try/catch 块能够在错误时正确捕获。
- 更好的错误处理：使用 try/catch 块来捕获主要代码块中的错误，使得处理错误更加轻松。
- 更好的代码组织：随着代码量的增加，使用 async/await 可以使代码更加整洁、易于维护和重构。
使用 async/await 的一个示例
让我们看一个使用 async/await 的简单示例。我们从以下数据开始：
const data = [
{ id: 1, name: "John Doe" },
{ id: 2, name: "Jane Doe" },
{ id: 3, name: "Jim Doe" }
];接着我们有一个函数，可以在一段时间后返回数据：
-- -------------------- ---- -------
-------- --------------- -
------ --- ----------------- ------- -- -
------------- -- -
----- ------- - ----------
-------------- --- -- ----- ----- ---- ---
-----------------
-- ------
---
-在这个示例中，fetchData 函数模拟从服务器获取数据的操作，等待两秒钟，然后在现有数据的基础上添加一条新的数据。
接下来，让我们看看如何使用 async/await 编写代码：
-- -------------------- ---- -------
----- -------- ------------ -
--- -
----- ------- - ----- ----------------
---------------------
----- ------- - ----- -------------------
---------------------
- ----- ------- -
-------------------
-
-
-------------在这个示例中，我们定义了一个名为 myFunction 的异步函数。该函数首先以现有数据调用 fetchData，然后在等待 2 秒后，使用 resolve 返回一个新数组，该数组包含一个新的数据项。
接下来，我们再次调用 fetchData，并传入新的变量 result1。然后等待 2 秒钟总共 4 秒后，它将获取包含两个新数据项的数组。在这个示例中，我们使用了 try/catch 块以处理可能发生的错误。
结论
在 ES9 中使用 async/await 是一种非常强大的编写 JavaScript 异步代码的方式。它使代码的读写和调试更加轻松，并可以使代码更加整洁和可维护。
如果您仍在使用回调或 Promise 等异步编程方法，请考虑使用 async/await。它使异步编程变得更加简单，但仍保留了所有的能力和灵活性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674a7569a1ce0063548ef93b