JavaScript 是一种单线程语言，但是同时也是一种非常适合异步操作的语言。在 JavaScript 中，异步操作通常涉及到 AJAX 请求、定时器、事件处理等，这些操作往往需要等待一段时间才能得到结果，而在此期间，主线程可以继续执行其他任务，以保证页面的流畅性和响应速度。
在 JavaScript 的早期版本中，异步操作主要通过回调函数来实现，而这种方式往往会导致回调地狱，使代码难以维护和理解。随着 ES6 和后续版本的不断更新，JavaScript 的异步操作也得到了极大的改善和优化，本文将对 JavaScript 异步操作的进化史进行详细介绍。
ES6: Promise
ES6 引入了 Promise 对象，这是一种用于异步操作的新的语法结构。Promise 对象表示一个异步操作的最终状态（成功或失败），并提供了链式调用的方式，使得代码更加清晰和可读。
Promise 对象有三种状态：pending（进行中）、fulfilled（已成功）和 rejected（已失败）。通过 then 方法可以注册成功和失败的回调函数，并在异步操作完成后自动调用相应的函数。
下面是一个使用 Promise 的示例代码：
-- -------------------- ---- -------
-------- ------------- -
------ --- ----------------- ------- -- -
------------- -- -
-------------- --------- ------------
-- ------
---
-
-------------
------------ -- -
--------------------
--
------------ -- -
---------------------
---在上面的代码中，asyncMethod 函数返回一个 Promise 对象，并在一秒钟后调用 resolve 方法，表示异步操作已完成。then 方法接收成功的回调函数，catch 方法接收失败的回调函数。通过这种方式，我们可以避免回调地狱，使代码更加清晰和易于维护。
ES7: Async/Await
ES7 引入了 Async/Await 语法，这是一种基于 Promise 的异步编程方式，使得异步操作的代码更加简洁和易于理解。
Async/Await 语法使用 async 和 await 两个关键字来实现。async 表示异步函数，可以在函数前面加上 async 关键字来声明。await 表示等待异步操作的结果，只能在 async 函数内部使用。
下面是一个使用 Async/Await 的示例代码：
-- -------------------- ---- -------
-------- ------------- -
------ --- ----------------- ------- -- -
------------- -- -
-------------- --------- ------------
-- ------
---
-
----- -------- ----------- -
----- ------ - ----- --------------
--------------------
-
------------在上面的代码中，testAsync 函数前面加上了 async 关键字，表示它是一个异步函数。在函数内部，使用 await 等待 asyncMethod 函数的结果，并将结果赋值给 result 变量。通过这种方式，我们可以避免回调地狱，使代码更加简洁和易于理解。
ES8: Async Iterator
ES8 引入了 Async Iterator，这是一种用于异步迭代的新的语法结构。Async Iterator 可以用于处理大量的异步数据，例如网络请求、文件读取等。
Async Iterator 使用 async 和 yield* 两个关键字来实现。async 表示异步函数，可以在函数前面加上 async 关键字来声明。yield* 表示异步迭代器，用于处理异步数据。
下面是一个使用 Async Iterator 的示例代码：
-- -------------------- ---- -------
----- --------- ---------------- -
--- - - --
----- -- - -- -
----- --- --------------- -- ------------------- -------
----- ----
-
-
------ ---------- -
--- ----- ------ --- -- ----------------- -
-----------------
-
-----在上面的代码中，asyncGenerator 函数前面加上了 async 关键字，表示它是一个异步函数。在函数内部，使用 yield* 返回异步数据，并使用 await 等待数据的返回。在主函数中，使用 for await...of 循环处理异步数据，并输出结果。
ES9: Asynchronous Iteration
ES9 引入了 Asynchronous Iteration，这是一种用于处理异步数据的新的语法结构。Asynchronous Iteration 可以用于处理大量的异步数据，例如网络请求、文件读取等。
Asynchronous Iteration 使用 Symbol.asyncIterator 和 for await...of 两个关键字来实现。Symbol.asyncIterator 表示异步迭代器，用于处理异步数据。for await...of 表示异步循环，用于处理异步数据的迭代。
下面是一个使用 Asynchronous Iteration 的示例代码：
-- -------------------- ---- -------
----- --------- ---------------- -
--- - - --
----- -- - -- -
----- --- --------------- -- ------------------- -------
----- ----
-
-
------ ---------- -
--- ----- ------ --- -- ----------------- -
-----------------
-
-----在上面的代码中，asyncGenerator 函数返回一个异步迭代器，用于处理异步数据。在主函数中，使用 for await...of 循环处理异步数据，并输出结果。
ES10: Promise.allSettled
ES10 引入了 Promise.allSettled，这是一个用于处理多个 Promise 对象的新方法。Promise.allSettled 可以接收多个 Promise 对象，等待所有 Promise 对象执行完成后返回一个数组，数组中包含每个 Promise 对象的状态和结果。
下面是一个使用 Promise.allSettled 的示例代码：
-- -------------------- ---- -------
----- -------- - -------------------
----- -------- - ------------------ -------------- ----------
----- -------- - --- --------------- -- ------------------- -------
----------------------------- --------- ----------
------------- -- -
---------------------- -- -
-------------------------- --------------
---
--
------------ -- -
---------------------
---在上面的代码中，Promise.allSettled 接收三个 Promise 对象，其中 promise2 是一个失败的 Promise 对象。在 then 方法中，结果数组中包含每个 Promise 对象的状态和结果。通过这种方式，我们可以很方便地处理多个 Promise 对象的结果。
结论
JavaScript 的异步操作在 ES6 到 ES10 的版本中得到了极大的改善和优化，从回调函数到 Promise，再到 Async/Await、Async Iterator、Asynchronous Iteration 和 Promise.allSettled，这些新的语法结构为异步编程提供了更多的选择和优化，使得代码更加清晰、简洁和易于维护。
在实际开发中，我们应该根据具体的业务场景和需求选择合适的异步编程方式，以提高代码的质量和效率。同时，我们还应该不断学习和掌握新的 JavaScript 技术，以保持竞争力和创新性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674586a3c1a23897ea9e979b