在 JavaScript 中，异步编程是很常见的。本文将介绍 JavaScript 异步编程的两种主要方式：Promise 和 Callbacks，并探讨如何选择最佳的异步编程方法。
Callbacks
Callbacks 是 JavaScript 中最早使用的异步编程方法。它们是函数，可以作为参数传递给其他函数，通常是一个异步操作的回调函数。当异步操作完成时，该回调函数将被调用。
Callbacks 的一个常见用例是使用 setTimeout 函数模拟异步操作。下面是一个使用 Callbacks 的简单例子：
function delay(ms, callback) {
setTimeout(callback, ms);
}
delay(1000, function() {
console.log('Hello, world!');
});上面的例子中，delay 函数接受两个参数：等待延迟的时间（以毫秒为单位），以及当延迟结束时要执行的回调函数。在上面的例子中，回调函数只是简单地记录一个消息到控制台。
Callbacks 通常比 Promise 更简单，因为它们不需要额外的语法结构或技术。然而，Callback Hell（回调地狱）是 Callbacks 的一个缺点。如果需要多个异步操作，它们的回调函数可能会出现嵌套，导致代码难以维护。
Promise
Promise 是 ES6 中添加的新特性，是 JavaScript 编程中一个更现代的异步编程方法。Promise 用于处理异步操作的状态，并提供了一种更简洁的方法来处理异步操作的结果。
一个 Promise 可以有三种状态：
pending（等待中）： Promise 的初始化状态，不是 fulfilled 或 rejected。fulfilled（已成功）：表示异步操作已经成功完成，并且返回一个值。rejected（已拒绝）：表示异步操作发生错误，并返回错误信息。
Promise 通常使用 .then() 和 .catch() 方法来处理异步操作的结果。.then() 方法用来处理已成功的 Promise ，并返回执行成功的结果；.catch() 方法用来处理失败的 Promise ，并返回失败原因。
下面是一个使用 Promise 的示例：
-- -------------------- ---- -------
-------- --------- -
------ --- ------------------------- -
------------------- ----
---
-
--------------------------- -
------------------- ---------
---在上面的例子中，delay 函数返回一个新的 Promise ，当延迟完成时，Promise 的状态将转换为 fulfilled ，并在 .then() 方法中处理结果。
Promise 的另一个好处是它们可以串联起来。以前的示例可以改写成以下形式：
-- -------------------- ---- -------
-------- --------- -
------ --- ------------------------- -
------------------- ----
---
-
-----------
---------------- -
----------------------
------ ------------
--
---------------- -
----------------------
---上面的代码在 1 秒后打印 "Hello,"，在另一个 1 秒后打印 "world!"，这就是 Promise 链式编程的好处。
如何选择？
在 JavaScript 中，选择使用 Callbacks 还是 Promise 取决于个人或团队偏好以及项目的需求。以下是一些指导原则，可帮助您做出正确的选择：
- 如果只需要一个异步操作，则优先选择 Callbacks。
- 如果需要多个异步操作，同时必须等待它们完成（例如，从多个 API 端点获取数据），则优先使用 Promise。
- 如果代码量很少且只需要处理一个步骤，则建议使用 Callbacks。
- 如果代码已经使用 Promise，则应该继续使用 Promise。
- 对于新项目，建议优先选择 Promise。
结论
Callbacks 和 Promise 都是 JavaScript 中常见的异步编程方法。 Callbacks 是最早的方法，Promise 是 ES6 中的新增功能。选择使用哪种方法取决于个人或团队的偏好以及项目的需求。通常，建议使用 Promise，尤其是在需要处理多个异步操作的情况下。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6772339f6d66e0f9aad58c3c