从 callback 到 Promise：了解 ECMAScript 2019 的异步代码实现方式
前言
随着 Web 应用程序的发展，JavaScript 对异步编程的需求也越来越高，这也为 JavaScript 开发带来了一定的挑战。在很多情况下，我们需要调用一些异步函数，这些函数会在未来的某个时间点才会返回结果。而传统的回调函数方式可能会导致代码耦合和难以维护。因此，ECMAScript 2019 引入了 Promise 对象，它是一种更为优雅的异步编程方式。
本文将介绍从 callback 到 Promise 的演进过程，详细讲解 Promise 的使用方法以及 Promise 的实现原理。
从 callback 到 Promise
在 JavaScript 中，异步编程一开始采用的是回调函数的方式。回调函数是一个被异步函数传递进另一个函数中，当异步函数执行完毕时调用该回调函数。例如：
-- -------------------- ---- -------
-------- ----------------- -
------------- -- -
----- ---- - - ----- ------- ---- -- --
---------------
-- ------
-
------------ -- -
------------------
---在上面的例子中，我们定义了一个 getData 函数，它会在 1 秒后返回一些数据。同时，我们传递了一个回调函数，当数据返回后，该回调函数就会被调用。
虽然回调函数的方式是一种简单有效的异步编程方式，但很容易陷入回调地狱的问题。例如：
-- -------------------- ---- -------
-------- ----------------- -
------------- -- -
----- ---- - - ----- ------- ---- -- --
---------------
-- ------
-
-------- ---------------- --------- -
------------- -- -
----- ------- - ------- -------- --------
------------------ ----------
-- ------
-
-------- -------------------- --------- -
------------- -- -
----- ----- - ----------------------- -- -------------
------------------ --------
-- ------
-
------------ -- -
---------------- -------- -- -
------------------------ --------- -- -
-----------------------------
---
---
---在上面的例子中，我们定义了 3 个异步函数，分别是 getData、getFriends 和 getFriendNames。每个函数都需要将结果传递给下一个函数，并在最后一步中将结果输出。这样调用函数的代码就变得非常混乱，并且很难阅读和维护。因此，Promise 对象应运而生。
Promise 的使用
Promise 是一个异步编程的工具，它是 JavaScript 中的一种对象。它可以让异步编程变得更加简单和可读，并能够解决回调地狱的问题。
Promise 对象有 3 种状态：pending（进行中）、resolved（已完成）和rejected（已失败）。当异步操作完成时，Promise 对象的状态会从 pending 更改为 resolved 或 rejected。如果成功完成异步操作，则 Promise 对象将以 resolved 状态返回结果；如果操作失败，则 Promise 对象将以 rejected 状态返回错误。
以下是使用 Promise 的示例代码：
-- -------------------- ---- -------
-------- --------- -
------ --- --------------- -- -
------------- -- -
----- ---- - - ----- ------- ---- -- --
--------------
-- ------
---
-
-------- -------------------- -
------ --- --------------- -- -
------------- -- -
----- ------- - ------- -------- --------
--------------------- ----------
-- ------
---
-
-------- -------------------- -
------ --- --------------- -- -
------------- -- -
----- ----- - ----------------------- -- -------------
----------------- --------
-- ------
---
-
---------
-----------------
---------------------
--------------- -- -
-----------------------------
---在上面的代码中，我们使用了 Promise 对象重构了原来的异步函数。每个异步函数现在是一个返回 Promise 对象的函数。这些函数调用现在也被改为了 Promise 操作，从而消除了回调地狱问题。同时，我们使用了 promise chain 连接了这些函数，这让我们的代码变得清晰和易读。
Promise 的实现原理
Promise 对象的实现核心是一个状态机。Promise 对象的状态会从初始的待定状态（pending）转换为已完成（fulfilled）或已拒绝（rejected）状态。
当 Promise 对象创建并传入一个函数作为参数时，该函数必须接受两个函数作为参数：resolve 和 reject，当异步操作完成时，resolve 函数将被调用，并将结果传递给下一个 Promise；当异步操作失败时，reject 函数将被调用，并将错误信息传递给下一个 Promise。
当 Promise 对象的状态发生变化时，可以通过 then 方法注册回调函数。then 方法可以接受两个函数作为参数：第一个函数用于处理 fulfilled 状态，第二个函数用于处理 rejected 状态。
我们可以通过以下代码演示 Promise 状态发生改变的过程：
-- -------------------- ---- -------
----- ------- - --- ----------------- ------- -- -
------------- -- -
---------------- -----------
-- ------
---
-------
------------ -- -
--------------------
------ ------- ------- ----------
--
------------ -- -
--------------------
--
------------ -- -
-------------------
---在上面的代码中，我们创建了一个 Promise 并在 1 秒钟后将其状态更改为 resolved。在 then 方法中注册了两个回调函数，这两个函数将依次执行，并且通过返回值将结果传递给下一个函数。最后，我们在 catch 方法中处理 rejected 状态。注意，即使在第一个 then 中出现异常，也会立即执行 catch 回调函数。
总结
本文介绍了从 callback 到 Promise 的异步编程方式，详细讲解了 Promise 的使用方法和原理。相比于 callback，Promise 更优雅、更简单，并能够解决回调地狱的问题。Promise 对象还是一种可以让异步编程变得更加可控和易读的工具。
如果你想尝试使用 Promise，可以从一些简单的功能开始，逐步扩展你的项目。同时，也不要忘记使用 catch 方法来处理 promise 中出现的错误。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e57304f6b2d6eab30e36bd