Promise 是 JavaScript 中一种处理异步操作的方案，它将异步操作以链式调用的形式组织，方便代码的编写和维护。但是，在实际应用过程中，如果没有正确处理异常，就会导致代码逻辑错误甚至崩溃。
本文将介绍 Promise 链式调用中异常处理的问题，并提供解决方案。
问题
在 Promise 链式调用中，如果某个异步操作出现异常或者返回 rejected 状态的 Promise，那么就会跳过后续操作进入异常处理链中。这一机制看似通用，但实际使用中却不尽如人意。
例如，下面的代码片段展示了一个简单的的 Promise 链式调用：
// javascriptcn.com 代码示例
Promise.resolve()
.then(() => {
console.log("Step 1");
return Promise.reject(new Error("Promise Failed"));
})
.then(() => {
console.log("Step 2");
})
.catch((e) => {
console.error(e);
});上面的代码实现了以下操作：
- 初始化一个 resolved 状态的 Promise；
- 在 then 方法中打印一句话；
- 故意以 rejected 状态的 Promise 结束当前 then 方法；
- 在 then 方法中尝试打印一句话，但由于当前 Promise 状态为 rejected，所以跳过了当前 then 方法，进入 catch 链；
- 在 catch 链中捕获异常并打印出来。
根据 Promise 的机制，这段代码的输出应该是：
Step 1 Error: Promise Failed
但实际上，上面的代码只打印了下面一行日志：
Error: Promise Failed
打印 "Step 1" 和 "Step 2" 这两个日志被跳过了。这也意味着，在发生异常后，后面所有的 then 方法都将被跳过，整个 Promise 链也会被中断。
这显然不符合预期。因此，我们需要改进 Promise 的异常处理方式。
解决方案
为了解决 Promise 链式调用中无法正确处理异常的问题，我们可以使用一个专门处理异常的中间件函数。
该函数将会被插入到 Promise 链的中间，拦截并处理所有的异常信息。如果处理成功，它会返回 resolved 状态的 Promise，使得整个 Promise 链能够正确地继续运行。
下面是改进后的代码：
// javascriptcn.com 代码示例
Promise.resolve()
.then(() => {
console.log("Step 1");
return Promise.reject(new Error("Promise Failed"));
})
.then(() => {
console.log("Step 2");
})
.middleware((err) => {
console.error(err);
return Promise.resolve();
})
.then(() => {
console.log("Step 3");
});我们在 Promise 链后追加了一个 middleware 函数，该函数接收异常对象作为参数，并返回 resolved 状态的 Promise。
在只返回 rejected Promise 的情况下，整个 Promise 链是无法继续运行的。而通过 middleware 函数返回 resolved Promise，我们可以使 Promise 链正确地继续执行下去。
示例代码
以下示例代码中，实现了一个 middleware 函数。
Promise.prototype.middleware = function (handler) {
return this.catch((err) => {
return handler(err).then(() => {
throw err;
});
});
};该函数的入参是一个异常处理函数，它会在当前 Promise 被 rejected 的时候被调用。
异常处理函数的作用是将异常对象打印出来，同时返回理想状态（resolved）。这使整个 Promise 链得以正确的继续执行。
示例代码如下：
// javascriptcn.com 代码示例
Promise.resolve()
.then(() => {
console.log("Step 1");
return Promise.reject(new Error("Promise Failed"));
})
.then(() => {
console.log("Step 2");
})
.middleware((err) => {
console.error(err);
return Promise.resolve();
})
.then(() => {
console.log("Step 3");
});当这段代码执行完成，期望输出如下：
Step 1 Error: Promise Failed Step 3
可以看到，即使中间抛出了异常，Promise 链也继续执行并打印出了 "Step 3" 这一句话。
总结
在 JavaScript 开发中，Promise 是处理异步操作的重要概念。理解 Promise 的异常处理机制，掌握如何使用 middleware 函数处理异常，可以有效地提高 JavaScript 代码的可靠性。
以上就是本文介绍的方式，让你在使用 Promise 进行 异步操作时，如何处理链式调用过程中遇到的问题。同时，你也学习了如何通过 middleware 函数来处理异常和保证代码正确的执行顺序。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/653314d47d4982a6eb661922