JavaScript 异步编程指南：从 callback 到 Promise

阅读时长 9 分钟读完

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

纠错
反馈
相关推荐
精选内容