异步操作在前端开发中的重要性
随着前端应用程序变得越来越复杂，我们经常需要使用异步请求来获取，处理和传输数据。这样的异步操作可以防止 DOM 内容被阻塞和停滞，让 UI 和用户输入可以快速响应。
异步 API 的两种设计模式
一般来说，我们可以使用两种设计模式，回调和 Promise，来处理异步请求。接下来我们会分别介绍它们的优缺点，并提供一些代码示例。
回调模式
回调模式是一个常用的处理异步请求的方式。服务器端也经常使用回调模式来访问数据库、文件、网络等资源。回调函数是一个在请求完成后被调用的函数。下面是一个简单的回调示例：
-- -------------------- ---- -------
-- ------------
-------- ----------------- -
--- --- - --- -----------------
--------------- ------------------------------------------------
---------- - ---------- -
-- ----------- --- ---- -
-----------------------
-
--
-----------
-
-- ----
---------------------- -
------------------
---上述代码可以用 getJSON 函数来简化：
-- -------------------- ---- -------
-------- ------------ --------- -
----- --- - --- -----------------
--------------- -----
---------- - ---------- -
-- ----------- --- ---- -
-------------- --------------------------
- ---- -
------------ -------------- ------- -----------------
-
--
----------- - ---------- -
------------ -------------- ---------
--
-----------
-
-- ----
------------------------------------------------------- ------------- ----- -
-- ---- --- ----- -
-------------------
- ---- -
------------------
-
---回调的优点在于简单易懂，但缺点是如果我们需要多个异步操作，会出现 Callback Hell（地狱回调）的情况，即多重嵌套的回调函数的代码令人难以理解和维护。
Promise 模式
Promise 是异步处理的更好方式。它可以更好地处理多个并发异步操作，提高了代码的可读性和可维护性。Promise 可以分为 pending（等待），fulfilled（成功），rejected（失败）三种状态。下面我们看下 Promise 的代码示例：
-- -------------------- ---- -------
-- -- ------- --------
-------- --------- -
------ --- ----------------- ------- -- -
----- --- - --- -----------------
--------------- ------------------------------------------------
---------- - -- -- -
-- ----------- --- ---- -
----------------------------------
- ---- -
---------- -------------- ------- -----------------
-
--
-----------
---
-
-- ----
--------------------- -- -------------------------------- -- ----------------------Promise 的优点
- 避免回调地狱。
- 更好地呈现代码的顺序和意图。
- 可以更好地进行错误处理，通过 .catch() 方法可以统一处理异步操作中的错误。
Promise 的使用细节
- Promise 是不可变的，一旦 Promise 进入了 fulfilled 或 rejected 状态，就不能再改变其状态。
- Promise 可以链式调用，每个 then() 都会返回一个 Promise。
- Promise 是基于事件的，使用 resolve() 将 Promise 的状态从 pending 改为 fulfilled，使用 reject() 将 Promise 的状态从 pending 改为 rejected。
结论
Promise 相对于回调模式，更加安全，可靠，更容易组合和重用。在更大规模的应用程序中，Promise 比回调更好地提供了对异步代码的控制和理解。因此，我们应该尽可能地使用 Promise，对我们的异步操作进行管理。
实际开发中，你可以使用一个完整的异步框架，这些框架提供了比简单的 Promise 更多的特性，如在一个操作执行的中间点进行操作，为了提高风险管理和计算方法等等。
I hope you find this article helpful.
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/672fdba3eedcc8a97c908140