在前端开发中，我们经常使用 Promise 来处理异步操作。Promise 对象有三种状态：pending、fulfilled 和 rejected。在 Promise 的代码实现中，reject 是一个非常重要的方法，它代表 Promise 对象的状态被拒绝，即 Promise 的操作失败了。
然而，在实际开发中，我们可能会遇到一些坑爹的 Promise reject，即 Promise 的 reject 方法没有按照我们的预期执行，导致程序出现异常或者 bug。本文将详细介绍一些常见的坑爹 Promise reject，以及如何避免它们。
坑爹一：没有捕获异常
在 Promise 的代码实现中，我们通常会使用 catch 方法来捕获 Promise 的 reject，以便于处理异常情况。例如：
-- -------------------- ---- ------- ------------------------ -- - -- ------------- - ------ ---------------- - ---- - ----- --- -------------- -------- --- --- ------ - ------------ -- - ------------------ -------------- -- - --------------------- ---展开代码
在上述代码中，如果 fetch 请求返回的 response 不是 ok 状态码，就会抛出一个 Error 对象，然后被 catch 方法捕获。这样我们就可以在控制台输出错误信息，方便调试和修复问题。
然而，有时候我们可能会忘记在 Promise 链中加入 catch 方法，导致异常没有被捕获。例如：
-- -------------------- ---- ------- ------------------------ -- - -- ------------- - ------ ---------------- - ---- - ----- --- -------------- -------- --- --- ------ - ------------ -- - ------------------ ---展开代码
在上述代码中，如果 fetch 请求返回的 response 不是 ok 状态码，就会抛出一个 Error 对象，但是由于没有 catch 方法，这个异常会被忽略掉，导致程序出现 bug。
解决办法是在 Promise 链的最后加上 catch 方法，以便于捕获所有可能出现的异常。例如：
-- -------------------- ---- ------- ------------------------ -- - -- ------------- - ------ ---------------- - ---- - ----- --- -------------- -------- --- --- ------ - ------------ -- - ------------------ -------------- -- - --------------------- ---展开代码
坑爹二：没有返回 Promise 对象
在 Promise 的代码实现中，我们通常会在 Promise 的回调函数中返回一个 Promise 对象，以便于在 Promise 链中进行下一步操作。例如：
-- -------------------- ---- ------- --- ----------------- ------- -- - ------------- -- - ----------------- -- ------ -------------- -- - -------------------- ------ --- ----------------- ------- -- - ------------- -- - ----------------- -- ------ --- -------------- -- - -------------------- ---展开代码
在上述代码中，第一个 Promise 对象返回的结果是字符串 'hello'，然后在第一个 then 方法中返回了另一个 Promise 对象，该 Promise 对象返回的结果是字符串 'world'。这样，第二个 then 方法就可以接收到字符串 'world'，并将其输出到控制台。
然而，有时候我们可能会忘记在 Promise 的回调函数中返回一个 Promise 对象，导致程序出现 bug。例如：
-- -------------------- ---- ------- --- ----------------- ------- -- - ------------- -- - ----------------- -- ------ -------------- -- - -------------------- ------------- -- - --------------------- -- ------ -------------- -- - -------------------- ---展开代码
在上述代码中，第一个 Promise 对象返回的结果是字符串 'hello'，然后在第一个 then 方法中没有返回任何东西，而是直接使用了 setTimeout 方法。这样，第二个 then 方法就无法接收到任何结果，导致程序出现 bug。
解决办法是在 Promise 的回调函数中返回一个 Promise 对象，以便于在 Promise 链中进行下一步操作。如果没有可用的 Promise 对象，可以使用 Promise.resolve 方法返回一个空的 Promise 对象。例如：
-- -------------------- ---- ------- --- ----------------- ------- -- - ------------- -- - ----------------- -- ------ -------------- -- - -------------------- ------ ------------------ -------------- -- - --------------------- ---展开代码
在上述代码中，第一个 Promise 对象返回的结果是字符串 'hello'，然后在第一个 then 方法中返回了一个空的 Promise 对象。这样，第二个 then 方法就可以接收到空的结果，并将字符串 'world' 输出到控制台。
坑爹三：没有正确处理错误
在 Promise 的代码实现中，我们通常会使用 try-catch 语句来处理 Promise 的 reject，以便于捕获异常并进行处理。例如：
-- -------------------- ---- ------- --- ----------------- ------- -- - ------------- -- - ---------- ---------------- ---- --------- -- ------ -------------- -- - -------------------- -------------- -- - --------------------- ---展开代码
在上述代码中，第一个 Promise 对象返回了一个 reject 状态，抛出了一个 Error 对象。然后在 Promise 链中使用了 catch 方法来捕获异常，并将异常信息输出到控制台。
然而，有时候我们可能会忘记使用 try-catch 语句来处理 Promise 的 reject，导致程序出现异常或者 bug。例如：
new Promise((resolve, reject) => { setTimeout(() => { reject(new Error('something went wrong')); }, 1000); }).then(result => { console.log(result); });
在上述代码中，第一个 Promise 对象返回了一个 reject 状态，抛出了一个 Error 对象。然而，由于没有使用 catch 方法，这个异常会被忽略掉，导致程序出现异常或者 bug。
解决办法是使用 try-catch 语句来处理 Promise 的 reject，以便于捕获异常并进行处理。例如：
-- -------------------- ---- ------- --- - --- ----------------- ------- -- - ------------- -- - ---------- ---------------- ---- --------- -- ------ -------------- -- - -------------------- --- - ----- ------- - --------------------- -展开代码
在上述代码中，我们使用 try-catch 语句来处理 Promise 的 reject，以便于捕获异常并进行处理。如果没有 try-catch 语句，这个异常就会被忽略掉，导致程序出现异常或者 bug。
结论
在前端开发中，Promise 是一个非常重要的工具，可以帮助我们处理异步操作，提高程序的性能和稳定性。然而，在使用 Promise 的过程中，我们可能会遇到一些坑爹的 Promise reject，导致程序出现异常或者 bug。为了避免这些问题，我们需要注意一些常见的错误，例如没有捕获异常、没有返回 Promise 对象、没有正确处理错误等等。只有掌握了这些技巧，我们才能写出高质量的前端代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674121aed40a3cb159e912e3
