Promise 是 JavaScript 中处理异步编程的一种方式，它可以避免回调地狱，让代码更加清晰易读。在前端开发中，Promise 是必不可少的技术之一。本文将进一步介绍 Promise 的相关知识，让你更加深入地理解 Promise 并且能够更好地使用它。
Promise 的三种状态
Promise 有三种状态：pending、fulfilled 和 rejected。在 Promise 对象创建时，它的状态为 pending，可以通过 resolve 方法将 Promise 状态变为 fulfilled，也可以通过 reject 方法将 Promise 状态变为 rejected。
以下是一个简单的 Promise 示例：
-- -------------------- ---- ------- ----- ------- - --- ----------------- ------- -- - ------------- -- - ------------------- -- ------ --- --------------------- -- - -------------------- -- --------- ---------------- -- - ------------------- ---展开代码
在上面的代码中，我们创建了一个 Promise 对象，它在 1 秒后将状态变为 fulfilled，然后通过 then 方法获取 Promise 的值并打印出来。
Promise 的链式调用
Promise 的 then 方法可以返回一个新的 Promise 对象，这样就可以进行链式调用。链式调用可以让代码更加简洁，避免了回调地狱的问题。
以下是一个 Promise 链式调用的示例：
-- -------------------- ---- ------- ----- ------- - --- ----------------- ------- -- - ------------- -- - ----------- -- ------ --- --------------------- -- - -------------------- -- - ------ ------ - -- ---------------- -- - -------------------- -- - ------ ------ - -- ---------------- -- - -------------------- -- - ---------------- -- - ------------------- ---展开代码
在上面的代码中，我们创建了一个 Promise 对象，在第一个 then 方法中将 Promise 的值加 1，并返回一个新的 Promise 对象，然后在第二个 then 方法中将 Promise 的值再加 1，并返回一个新的 Promise 对象，最后在第三个 then 方法中打印出 Promise 的值。
Promise.all 和 Promise.race
Promise.all 和 Promise.race 是 Promise 的两个静态方法，它们可以让我们更加方便地处理多个 Promise 对象。
Promise.all 方法接收一个 Promise 对象数组作为参数，它会等待所有的 Promise 对象都变为 fulfilled 状态后，返回一个新的 Promise 对象，这个新的 Promise 对象的值是一个数组，包含了所有 Promise 对象的值。
以下是一个 Promise.all 的示例：
-- -------------------- ---- ------- ----- -------- - --- ----------------- ------- -- - ------------- -- - ----------- -- ------ --- ----- -------- - --- ----------------- ------- -- - ------------- -- - ----------- -- ------ --- ----- -------- - --- ----------------- ------- -- - ------------- -- - ----------- -- ------ --- ---------------------- --------- ------------------------- -- - --------------------- -- --- -- -- ---------------- -- - ------------------- ---展开代码
在上面的代码中，我们创建了三个 Promise 对象，然后通过 Promise.all 方法等待它们都变为 fulfilled 状态后，打印出它们的值。
Promise.race 方法接收一个 Promise 对象数组作为参数，它会等待所有的 Promise 对象中有一个变为 fulfilled 或者 rejected 状态后，返回一个新的 Promise 对象，这个新的 Promise 对象的值是第一个变为 fulfilled 或者 rejected 状态的 Promise 对象的值。
以下是一个 Promise.race 的示例：
-- -------------------- ---- ------- ----- -------- - --- ----------------- ------- -- - ------------- -- - ----------- -- ------ --- ----- -------- - --- ----------------- ------- -- - ------------- -- - ----------- -- ------ --- ----- -------- - --- ----------------- ------- -- - ------------- -- - ----------- -- ------ --- ----------------------- --------- ------------------------ -- - -------------------- -- - ---------------- -- - ------------------- ---展开代码
在上面的代码中，我们创建了三个 Promise 对象，然后通过 Promise.race 方法等待它们中有一个变为 fulfilled 或者 rejected 状态后，打印出它们的值。
Promise 的错误处理
在 Promise 中，如果在链式调用中某个 Promise 对象发生了错误，可以通过 catch 方法来捕获这个错误。catch 方法返回一个新的 Promise 对象，它的状态为 rejected。
以下是一个 Promise 错误处理的示例：
-- -------------------- ---- ------- ----- ------- - --- ----------------- ------- -- - ------------- -- - ---------------- -- ------ --- --------------------- -- - -------------------- ---------------- -- - ------------------- -- ------- ---展开代码
在上面的代码中，我们创建了一个 Promise 对象，它在 1 秒后将状态变为 rejected，然后通过 catch 方法捕获这个错误并打印出来。
Promise 的取消
目前，JavaScript 中并没有原生的 Promise 取消机制，但是可以通过手动实现 Promise 的取消。
以下是一个手动实现 Promise 取消的示例：
-- -------------------- ---- ------- ----- ----------------- - -------------------- - ------------ - -------- --------------- - ------ - -------- - --------------- - ----- - ----------------- ----------- - -- ----------------- - ------ ----- - ----- ----------- - ------------------------------ ------------ ------ --- ------------------------------- - ----------------- - -- ----------------- - ------ ----- - ----- ----------- - ------------------------------- ------ --- ------------------------------- - - ----- ------- - --- --------------------- ----------------- ------- -- - ------------- -- - ------------------- -- ------ ---- --------------------- -- - -------------------- ---------------- -- - ------------------- --- -----------------展开代码
在上面的代码中，我们手动实现了一个 CancelablePromise 类，它包装了一个原生的 Promise 对象，并且可以通过 cancel 方法来取消这个 Promise 对象。在 then 和 catch 方法中，我们判断了当前的 Promise 对象是否已经被取消，如果已经被取消，则直接返回当前的 CancelablePromise 对象，否则将原生的 Promise 对象包装成一个新的 CancelablePromise 对象并返回。
结论
通过本文的介绍，我们可以更加深入地了解 Promise 的相关知识，包括 Promise 的三种状态、链式调用、Promise.all 和 Promise.race、Promise 的错误处理以及手动实现 Promise 的取消。掌握这些知识可以让我们更加熟练地使用 Promise，并且可以在项目中更好地处理异步编程。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/675595153af3f99efe4f5f21
