随着前端应用的不断发展，现代开发方式越来越倾向于异步编程。在 JavaScript 中，由于其单线程的特性，当遇到长时间阻塞的 I/O 操作（例如网络请求）时，整个应用就会变得非常缓慢。然而，使用异步编程，我们可以在请求完成的同时持续执行其他任务，从而避免应用的停顿。
在过去的几年中，Promise 成为了 JavaScript 中最流行的异步编程解决方案之一。Promise 的出现使得异步编程更加高效、可靠，并且简化了程序的逻辑。
Promise 是什么
简而言之， Promise 是一种用于异步编程的解决方案，可以用于处理长时间的 I/O 操作。 Promise 封装了异步操作，并使用链式调用（chaining）来保证异步操作执行的顺序和结果。
一个 Promise 可以代表一个异步操作，可以拥有三种不同的状态：
- 未实现（pending）：Promise 处于初始状态，既不是成功（fulfilled）也不是失败（rejected）。
- 已实现（fulfilled）：表示 Promise 已经成功完成了其操作，并返回了一个结果。
- 已拒绝（rejected）：表示 Promise 由于某些原因失败，返回了一个错误。
Promise 的基本使用
Promise 是通过实例化它来进行操作。为了使用 Promise，我们首先需要创建一个 Promise 实例，然后告诉它需要执行的操作和成功和失败的回调函数。
下面是一个 Promise 的例子：
-- -------------------- ---- -------
----- --------- - --- ----------------- ------- -- -
-- ----
------------- -- -
----- ------ - --------------
-- ------- - ---- -
----------------
- ---- -
---------- ------------- -- -------- ------ -----------
-
-- ------
---
---------
------------ -- -
---------------- ------- ------------
--
------------ -- -
--------------------- ------ -------------------
---上述代码创建了一个 Promise 实例，其中异步操作为在 1 秒内生成一个随机数，并通过 resolve 或 reject 回调函数返回结果。
之后，我们使用 then 方法来处理成功的情况，使用 catch 方法来处理失败的情况。在成功或失败的情况下，Promise 将返回返回值或错误信息。
Promise 的进阶使用：Chaining 和 错误处理
一开始，许多人会简单地将 Promise 用于一个异步操作，并在 then 方法中进行处理。然而，使用 Promise 的最大优势之一是链式调用（chaining），这意味着可以在多个异步操作之间建立关系。
下面是一个示例代码：
Promise.resolve(2)
.then((number) => {
return number * 2;
})
.then((result) => {
console.log(result); // 4
});在上述代码中，我们创建了一个 Promise 并为其传递了一个整数值 2，然后创建了两个 then 方法，其中第一个 then 方法返回传递给它的值乘以 2。第二个 then 方法接收函数返回值并将其打印到控制台上。
当一个 Promise 被 resolve 或 reject 时，使整个链失效的异常将被传递给 catch 方法来处理。
Promise.resolve('Hello')
.then((result) => {
throw new Error('Something went wrong!');
})
.catch((error) => {
console.log(error.message); // "Something went wrong!"
});在上述代码中，我们故意抛出异常来演示 catch 方法的用法。最终，Promise 被拒绝并将错误传递给 catch 方法来处理。
Promise.all 和 Promise.race 的使用
在异步编程中，有时需要同时处理多个任务或并行处理多个异步操作。Promise 提供了两种方法来实现这些操作：Promise.all 和 Promise.race。
Promise.all 方法可以将多个 Promise 实例作为参数，并在所有 Promise 正确完成后返回一个数组，其中包含所有 Promise 实例的值。
const promise1 = Promise.resolve(3);
const promise2 = Promise.resolve(4);
Promise.all([promise1, promise2]).then((results) => {
console.log(results); // [3, 4]
});在上述代码中，Promise.all 方法接收两个 Promise 实例，并在两个 Promise 成功完成后返回一个数组，其中包含每个 Promise 实例的值。
与 Promise.all 方法不同，Promise.race 方法会在其中任何一个 Promise 实例被 resolve 或 reject 后立刻返回结果。
const promise1 = new Promise((resolve) => setTimeout(resolve, 1000, 'first promise'));
const promise2 = new Promise((resolve) => setTimeout(resolve, 3000, 'second promise'));
Promise.race([promise1, promise2]).then((result) => {
console.log(result); // "first promise"
});在上述代码中，Promise.race 方法接收两个 Promise 实例，并在第一个 Promise 完成后立即返回其结果。因为第一个 Promise 的 delay 为 1 秒，而第二个 Promise 的 delay 为 3 秒，因此结果为第一个 Promise 实例的值 "first promise"。
结论
Promise 是一种广泛使用的 JavaScript 解决方案，用于处理异步操作。使用 Promise 可以有效地解决回调地狱，并提高代码的可读性和可维护性。我们在这篇文章中了解了 Promise 的基础知识和进阶特性，包括：Promise 基本使用、Chaining 和 错误处理、Promise.all 和 Promise.race。
通过使用 Promise，我们可以更好地并行执行异步操作，处理异步操作的错误，并使异步编程变得更加高效、可靠、简洁。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/671ccb0c9babaf620fb287c1