Promise 是 JavaScript 中非常重要的一个概念，是异步编程的基础。但是，如果不小心使用，就会遇到一些坑。本文将介绍一些常见的 Promise 坑，并提供避免这些坑的指南。
Promise 的基本概念
Promise 是一种异步编程的解决方案，它代表了一个异步操作的最终完成或失败的结果。Promise 有三种状态：pending、fulfilled 和 rejected。
pending: 初始状态，既不是成功也不是失败状态。fulfilled: 意味着操作成功完成。rejected: 意味着操作失败。
Promise 有两个核心方法：resolve 和 reject。resolve 方法将 Promise 状态从 pending 变为 fulfilled，reject 方法将 Promise 状态从 pending 变为 rejected。
Promise 的常见坑
1. 忘记返回 Promise
Promise 需要返回一个 Promise 对象，否则无法链式调用。如果忘记返回 Promise，会导致后续的 then 方法无法执行。
function fetchData() {
fetch('https://example.com')
.then(response => {
// 处理 response
})
}上述代码中，fetchData 函数没有返回 Promise，因此后续的 then 方法无法执行。
解决方法：在函数中返回 Promise。
function fetchData() {
return fetch('https://example.com')
.then(response => {
// 处理 response
})
}2. 多次调用 resolve 或 reject
Promise 只能从 pending 转换到 fulfilled 或 rejected 状态一次。如果多次调用 resolve 或 reject 方法，只有第一次调用有效，后续的调用将被忽略。
const promise = new Promise((resolve, reject) => {
resolve('foo')
reject('bar')
})
promise.then(value => {
console.log(value)
})上述代码中，虽然调用了 resolve 和 reject 方法，但是只有 resolve 方法生效，最终输出的结果是 foo。
解决方法：避免多次调用 resolve 或 reject 方法。
-- -------------------- ---- -------
----- ------- - --- ----------------- ------- -- -
-- ----------- -
--------------
- ---- -
-------------
-
--
------------------ -- -
------------------
-------------- -- -
--------------------
--3. 没有使用 catch 方法
如果 Promise 被拒绝，没有使用 catch 方法捕获异常，会导致错误被忽略，从而无法得知错误的原因。
fetch('https://example.com')
.then(response => {
// 处理 response
})上述代码中，如果网络请求失败，没有使用 catch 方法捕获异常，导致错误被忽略。
解决方法：使用 catch 方法捕获异常。
fetch('https://example.com')
.then(response => {
// 处理 response
})
.catch(error => {
console.error(error)
})4. then 方法中没有返回值
如果 then 方法中没有返回值，会导致后续的 then 方法无法接收到上一个 then 方法的返回值。
fetch('https://example.com')
.then(response => {
console.log(response)
})
.then(data => {
console.log(data)
})上述代码中，第一个 then 方法没有返回值，导致后续的 then 方法无法接收到上一个 then 方法的返回值。
解决方法：在 then 方法中返回值。
fetch('https://example.com')
.then(response => {
console.log(response)
return response.json()
})
.then(data => {
console.log(data)
})Promise 的指南
1. 使用 Promise.resolve 和 Promise.reject
Promise 提供了两个静态方法：Promise.resolve 和 Promise.reject，分别用于创建一个已经成功完成的 Promise 和一个已经失败的 Promise。
-- -------------------- ---- ------- ----- -------- - ---------------------- ----- -------- - --------------------- ------------------- -- - ------------------ -- -------------------- -- - -------------------- --
上述代码中，使用 Promise.resolve 创建一个已经成功完成的 Promise，使用 Promise.reject 创建一个已经失败的 Promise。
2. 使用 Promise.all 和 Promise.race
Promise 提供了两个静态方法：Promise.all 和 Promise.race，分别用于处理多个 Promise 的情况。
Promise.all 方法接收一个 Promise 数组，当所有 Promise 都成功完成时，返回一个成功完成的 Promise，并将每个 Promise 的结果按照传入的顺序组成一个数组返回。如果有任何一个 Promise 失败，则返回一个失败的 Promise。
-- -------------------- ---- -------
----- -------- - ----------------------
----- -------- - ----------------------
----- -------- - ---------------------
---------------------- --------- ----------
------------ -- -
-------------------
--
------------ -- -
--------------------
--上述代码中，使用 Promise.all 方法处理多个 Promise 的情况，当所有 Promise 都成功完成时，返回一个成功完成的 Promise。
Promise.race 方法接收一个 Promise 数组，当任何一个 Promise 成功完成或失败时，返回一个成功完成或失败的 Promise。
-- -------------------- ---- -------
----- -------- - --- --------------- -- -
------------- -- -
--------------
-- -----
--
----- -------- - --- --------------- -- -
------------- -- -
--------------
-- ----
--
----------------------- ----------
----------- -- -
------------------
--上述代码中，使用 Promise.race 方法处理多个 Promise 的情况，当任何一个 Promise 成功完成时，返回一个成功完成的 Promise。
结论
Promise 是 JavaScript 中非常重要的一个概念，是异步编程的基础。在使用 Promise 的过程中，需要注意避免常见的坑，并根据需要使用 Promise 的各种方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/675a51f10d5c303357425684