javascript - 以干净的方式打破 javascript promise 链

Question

我正在尝试将 promise 链接起来，这样如果一个 promise 被拒绝，链条就会中断。我跟着一个 previous SO question 的线索并尝试将其应用于本地 promise ，但我认为我误解了事情的运作方式。

下面是我重写代码的方式:

Promise.resolve()
    .then(function() {
        return step(1)
            .then(null, function() {
                stepError(1);
            });
    })
    .then(function() {
        return step(2)
            .then(null, function() {
                stepError(2);
            });
    })
    .then(function() {
        return step(3)
            .then(null, function() {
                stepError(3);
            });
    });

function step(n) {
    console.log('Step '+n);
    return (n === 2) ? Promise.reject(n) : Promise.resolve(n);
}

function stepError(n) {
    console.log('Error '+n);
    return Promise.reject(n);
}

以上代码的输出为:

Step 1
Step 2
Error 2
Step 3
[UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 2): 2]

在我的理解中，第 2 步应该打破链条，第 3 步不应该被执行。当 step(2) 返回一个被拒绝的 promise 时，stepError(2) 会按预期执行。但是由于返回了Promise.reject(2)，next then中的函数不应该被执行，并且由于最后没有catch，所以第2步被拒绝的promise似乎-正如预期的那样-被转发到它退出链，因为它没有找到任何处理程序。

我在这里错过了什么？

这是一个可以玩的 JSFiddle:https://jsfiddle.net/6p4t9xyk/

Answer 1

In my understanding, step 2 should break the chain...

它会，但您不小心将拒绝变成了解决方案。

关于 promises 的关键是，每次调用 then 都会创建一个新的 promise，它会根据 then 回调的内容来解决/拒绝(s) 执行，处理拒绝的回调会将拒绝转化为解决方案，除非它有意这样做。

所以在这里:

return step(2)
    .then(null, function() {  // This handler converts the
        stepError(2);         // rejection into a resolution
    });                       // with the value `undefined`

这样您就可以拥有补偿错误的错误处理程序。

由于 stepError 返回拒绝，您可以通过添加 return 继续拒绝:

return step(2)
    .then(null, function() {
        return stepError(2);  // Added `return`
    });

...或者，完全删除该处理程序:

return step(2);

...或者您可以在回调中抛出，它会自动变成拒绝。

未处理的拒绝警告是由于没有消耗来自 stepError 的拒绝。

---

这是一个返回 stepError 结果的例子:

Promise.resolve()
    .then(function() {
        return step(1)
            .then(null, function() {
                return stepError(1); // Added `return`
            });
    })
    .then(function() {
        return step(2)
            .then(null, function() {
                return stepError(2); // Added `return`
            });
    })
    .then(function() {
        return step(3)
            .then(null, function() {
                return stepError(3); // Added `return`
            });
    });

function step(n) {
    console.log('Step '+n);
    return (n === 2) ? Promise.reject(n) : Promise.resolve(n);
}

function stepError(n) {
    console.log('Error '+n);
    return Promise.reject(n);
}