Promise 是 ES6 中新增加的一种机制，用来处理异步操作。通过 Promise，我们可以更加优雅、方便地处理异步代码，并且避免了回调地狱（callback hell）。然而在使用 Promise 过程中，经常会遇到一些错误。接下来，本文将总结 ES6 Promise 中常见的错误，并给出解决方法。
1. Promise 的基础概念
在深入了解 Promise 错误之前，我们先来回顾一下 Promise 的基础概念。
Promise 是一个对象，用来表示异步操作的最终完成或失败，并返回其结果。Promise 有三个状态：pending（准备中）、fulfilled（已完成）、rejected（已失败）。当 Promise 的状态从 pending 转变为 fulfilled 或 rejected 时，其状态就不会再改变。
Promise 的基本语法如下：
-- -------------------- ---- -------
----- ------- - --- ----------------- ------- -- -
-- ----
-- -------- -
--------------
- ---- -
-------------
-
---
--------------------- -- -
-- ------
-------------- -- -
-- ------
---2. Promise 常见错误及解决方法
2.1 Promise 对象的状态一旦改变就不能再次改变
Promise 的状态一旦从 pending 变为 fulfilled 或 rejected，就不能再次改变。如果你在操作结果已经确定后，再次使用 resolve 或 reject 来改变 Promise 的状态会导致错误。
-- -------------------- ---- -------
----- ------- - --- ----------------- ------- -- -
-----------
----------
---
--------------------- -- -
--------------------
-------------- -- -
-------------------
---
-- ------- -正确的做法是在 Promise 的状态发生改变之前检查一下 Promise 的状态：
-- -------------------- ---- -------
----- ------- - --- ----------------- ------- -- -
-- -------- -
--------------
- ---- -
-------------
-
---
-- ----------------- -
--------------------- -- -
-- ------
-------------- -- -
-- ------
---
- ---- -- ------------------- -
-- ------ -------
- ---- -- ------------------ -
-- ------ -------
-2.2 使用 Promise 时，一定要返回 Promise
在使用 Promise 的时候，一定要注意在 Promise 的执行体中返回 Promise。如果不返回 Promise，将会导致 Promise 的链式调用失效。
-- -------------------- ---- -------
----- ------- - --- ----------------- ------- -- -
-----------
---
--------------------- -- -
--------------------
---
-- ------- -
--------------------- -- -
------------------ - ---
---
-- ------- -可以看到第二个 then 方法并没有执行，这是因为第一个 then 方法返回了一个 promise，但是第二个 then 方法并没有同步地返回一个 promise，导致链式调用失效。
正确的做法是在 then 方法的执行体中返回一个 promise，在链式调用中将其传递给下一个 then 方法：
-- -------------------- ---- -------
----- ------- - --- ----------------- ------- -- -
-----------
---
--------------------- -- -
--------------------
------ ---------------------- - ---
---------------- -- -
--------------------
---
-- ------- -
-- -2.3 在 then 方法中一定要返回一个值
在 then 方法中一定要返回一个值，否则会导致链式调用失效。
-- -------------------- ---- -------
----- ------- - --- ----------------- ------- -- -
-----------
---
--------------------- -- -
--------------------
-- -----
---------------- -- -
------------------ - ---
---
-- ------- -
-- ---正确的做法是在 then 方法中返回一个值，在链式调用中将其传递给下一个 then 方法：
-- -------------------- ---- -------
----- ------- - --- ----------------- ------- -- -
-----------
---
--------------------- -- -
--------------------
------ ------ - --
---------------- -- -
--------------------
---
-- ------- -
-- -2.4 在 catch 方法中一定要返回一个值
在 catch 方法中一定要返回一个值，否则会导致链式调用失效。
-- -------------------- ---- -------
----- ------- - --- ----------------- ------- -- -
----------------
---
------------------- -- -
-------------------
-- -----
---------- -- -
--------------------
---
-- ------- -----
-- ----正确的做法是在 catch 方法中返回一个值，在链式调用中将其传递给下一个 then 方法：
-- -------------------- ---- -------
----- ------- - --- ----------------- ------- -- -
----------------
---
------------------- -- -
-------------------
------ --------
--------------- -- -
-------------------
---
-- ------- -----
-- -----2.5 使用 async/await 时要注意错误处理
async/await 是 ES8 引入的 Promise 的语法糖，它可以更加简洁、直观地处理异步代码。但是在使用 async/await 的时候，要注意错误处理。
async function foo() {
const result = await Promise.reject('error');
console.log(result);
}
// Output: Uncaught (in promise) error在上面的代码中，我们将 Promise 的状态设置为 rejected，但是在 foo 函数中没有对错误进行处理，导致错误没有被捕获，在控制台中输出 Uncaught (in promise) error。
确保在 async 函数中使用 try/catch 语句来捕获错误：
-- -------------------- ---- -------
----- -------- ----- -
--- -
----- ------ - ----- ------------------------
--------------------
- ----- ----- -
-------------------
-
-
-- ------- -----3. 总结
在使用 Promise 的时候，要注意其基础概念以及常见错误。遇到错误时，可以通过检查 Promise 的状态、在 Promise 的执行体中返回 Promise、在 then 方法中返回值，在 catch 方法中返回值以及在 async/await 函数中对错误进行处理等方法来解决问题。正确地使用 Promise 可以使我们的代码更加优雅、方便地处理异步操作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646a4ada968c7c53b09f9636