JavaScript 是一门单线程语言，意味着它只能一次执行一条语句。然而，JavaScript 应用程序通常需要进行非阻塞、并行的处理，这就要求我们使用异步编程模型。
JavaScript 异步编程模型最初是通过 callback 实现的，不过随着时间的推移，callback 会导致嵌套层次过深和代码不易维护等问题。为了解决这些问题，JavaScript 社区引入了 Promise，进一步改进了异步编程的体验。
在本篇文章中，我们将介绍 JavaScript 异步编程中的基本概念，并通过一系列实例来演示使用 callback 和 Promise 的异步编程实践。
异步编程基础
在深入了解 callback 和 Promise 之前，我们需要理解异步编程中的一些基础概念。
非阻塞 I/O
在 JavaScript 中，访问浏览器的 DOM、进行网络请求和文件操作等都是 I/O 操作。在执行 I/O 操作时，如果代码不进行非阻塞处理，一旦阻塞就会导致整个应用程序停滞，用户界面也会停止响应。
非阻塞 I/O 是异步编程的核心思想之一。简单来说，非阻塞 I/O 是指在执行 I/O 操作时，应用程序可以继续执行其他任务而不被阻塞。当 I/O 操作完成时，应用程序会接收到一个事件通知，然后进行相应的处理。
非阻塞 I/O 通常使用回调函数来实现异步编程。当使用回调函数时，我们需要定义一个函数，作为操作完成后的回调函数。这个回调函数会在操作完成时被调用，以执行进一步的操作。这就是 callback 的基本思想。
异步函数
异步函数是执行异步操作的函数。异步函数通常使用 callback 或 Promise 来实现异步编程。
异步函数可以分为两种类型：带有回调函数的异步函数和返回 Promise 对象的异步函数。
带有回调函数的异步函数如下所示：
-------- ------------------ --------- -
----- --- - --- -----------------
--------------- ------
---------- - -- -- -
-- ----------- --- ---- -
-------------- ------------------
- ---- -
------------ -----------------------
-
--
----------- - -- -- -
------------ -------------- ----------
--
-----------
-
此处，readTextFile 函数接受一个路径名和一个回调函数作为参数。使用 XMLHttpRequest 对象来异步加载文本文件，然后在完成操作后调用回调函数进行响应。
返回 Promise 对象的异步函数如下所示：
-------- --------------------- -
----- ------- - --- ----------------- ------- -- -
----- --- - --- -----------------
--------------- ------
---------- - -- -- -
-- ----------- --- ---- -
--------------------------
- ---- -
---------- -----------------------
-
--
----------- - -- -- -
---------- -------------- ----------
--
-----------
---
------ --------
-此处，readFilePromise 函数也接受一个路径名作为参数。使用 Promise 对象来异步加载文本文件，然后在完成操作后调用 resolve 或 reject 函数返回结果或者错误。
使用 callback 进行异步编程
使用 callback 进行异步编程是初学者最容易学习和掌握的异步编程方式。因为我们只需要定义回调函数来响应异步操作的结果，就能够比较容易地进行异步编程。
下面是一个使用 callback 实现异步编程的例子：
-------- ----------------------- --------- -
------------- -- -
----- ------ - ------------------------ - -- -- --------
-- ------- --- -- -
------------ ------------- -- -----
- ---- -
-------------- --------
-
-- ------
-
------------------ ----- ------- -- -
-- ----- -
------------------- -----------------
- ---- -
-------------------- ------------
-
---在这个例子中，我们定义了一个 getRandomNumber 函数。getRandomNumber 函数接受一个长度参数和一个回调函数 callback。在函数内部，我们使用 setTimeout 模拟了一个异步操作，然后在操作完成后调用回调函数进行响应。
然后，我们使用 getRandomNumber 函数调用一个回调函数来获取一个随机数。在回调函数中，当我们遇到错误时，会使用 Error 对象进行处理，否则会返回随机数。
这里有几个需要注意的地方：
callback函数的第一个参数通常是Error对象，如果没有出错，则为null。- 异步操作完成后，我们必须调用
callback函数来返回操作结果。 - 在回调函数中，需要对错误情况进行处理，并且不能抛出异常。
使用 Promise 进行异步编程
Promise 是一种更高级和灵活的异步编程方式。使用 Promise 可以避免回调地狱，并且更方便地处理异步操作，提高代码可读性和可维护性。
下面是一个使用 Promise 实现异步编程的例子：
-------- ------------------------------ -
------ --- ----------------- ------- -- -
------------- -- -
----- ------ - ------------------------ - -- -- --------
-- ------- --- -- -
---------- ------------- -- -----
- ---- -
----------------
-
-- ------
---
-
-------------------------
-------------- -- -
-------------------- ------------
--
------------ -- -
------------------- -----------------
---在这个例子中，我们定义了一个 getRandomNumberPromise 函数。getRandomNumberPromise 函数接受一个长度参数，并返回一个 Promise 对象。
在函数内部，我们使用 Promise 对象和 setTimeout 模拟的异步操作。在 Promise 对象完成操作后，我们会调用 resolve 函数或 reject 函数以响应操作结果或错误。
然后，我们使用 getRandomNumberPromise 函数调用 then 和 catch 方法来获取随机数。我们可以在 then 方法中执行处理操作，在 catch 方法中处理错误。
这里有一些需要注意的事项：
Promise对象只返回一次结果。then方法接受一个处理成功情况的回调函数。catch方法传递的是一个处理异常情况的回调函数。- Promise chain 中的异常会被传递到下一个
catch方法。
Promise 错误处理
当使用 Promise 进行异步编程时，经常会遇到的问题是错误处理。我们常常会使用 catch 方法来处理错误，但是如何在 Promise chain 中优雅地处理错误是一个值得探讨的话题。
下面是一个例子，它展示了如何使用 Promise 错误处理：
-------- ------------------------- -
------ --- ----------------- ------- -- -
----- --- - --- -----------------
--------------- ------
---------- - -- -- -
-- ----------- --- ---- -
--------------------------
- ---- -
---------- -----------------------
-
--
----------- - -- -- -
---------- -------------- ----------
--
-----------
---
-
-------- ------------------ -
-- ------- -
------ ------------------ -------------- --------
-
------ ----------------------
-
----------------------------------
------------ -- -
------ -------------------
--
------------ -- -
------------------ ----------
--
------------ -- -
------------------- -----------------
---在这个例子中，我们使用一个 readTextFilePromise 函数读取一个文本文件。然后，我们使用一个 validateData 函数来验证数据的有效性。如果验证失败，将抛出一个 Error 异常。
在主程序中，我们首先调用 readTextFilePromise 函数，并执行添加在 then 方法后面的 validateData 函数。如果数据无效，validateData 函数将返回一个被拒绝的 Promise 对象。这会导致主程序中的下一个 catch 方法触发。
这里有一些需要注意的事项：
- 可以在
then方法中返回一个Promise对象，以便进行链式调用。 - 可以使用
catch方法在 Promise chain 中处理错误。 - 可以使用
Promise.reject返回一个被拒绝的Promise对象来进行错误处理。
结论
在使用 JavaScript 来编写应用程序时，异步编程是非常常见也是非常必要的一部分。callback 是初始的异步编程方式，但是随着复杂度的增加，容易产生代码难以维护和回调嵌套的问题。使用 Promise 可以更加灵活、可读和可维护。在开发过程中，我们需要根据项目的实际情况选择适当的异步编程方式，并避免在代码中产生形同异曲同工的样本。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/66f0c9d36fbf96019733f7be