JavaScript Promise的reject方法无法正确传播错误

在这篇文章中，我们将尝试理解为什么Promise的reject()方法不能正确传播错误，然后我们将看到解决方案，以及一些理论解释和编码示例。

首先，让我们快速查看以下部分，它向我们阐明了如何创建一个promise的语法。

语法： 我们可以使用以下语法来创建一个新的promise，根据需要可以解决或拒绝：

let promise_variable_name = new Promise ((resolve, reject) => {
    // Do something...
    // Either resolve it with certain parameters
    // inside resolve() method or either reject it
    // with reject statement in reject() method
});

现在我们来看一下以下显示的 then() 的语法， 以及 catch() 方法，我们将使用它来执行/捕获之前创建的 promise 中的错误：

promise_variable_name.then((result) => {
    // Do something with result parameter's value
})

// Further catch statement has to be added
// in case of any error caught
.catch((error) => {
    // Do something with this error variable
})

既然我们已经看过了所有的语法并仔细分析了它们，那么让我们来看一个快速示例，这将帮助我们更好、更高效地理解它们。

示例： 在这个示例中，我们将使用上述的语法创建一个promise，并按顺序执行它们以正确地在控制台上显示结果。

Javascript

<script>
    let promise = new Promise((resolve, reject) => {
        resolve("This article is available on "
            + "the GeeksforGeeks platform...");
    });
 
    promise
        .then((result) => console.log(result))
        .catch((error) => console.log(error));
</script>

输出:

This article is available on the GeeksforGeeks platform...

既然我们已经看到了上面的示例中作为承诺的执行。让我们来看看以下的示例，我们将试图分析问题陈述及其解决方案。

示例1：

• 在这个示例中，我们将创建一个函数，该函数将接受一个数字（可以是正数或负数），然后我们将通过上述的语法创建一个承诺。
• 然后在该承诺中，我们将应用一个条件（使用if语句的帮助），该条件将根据要求检查数字的值。
• 然后，如果该数字符合要求，我们将应用reject()方法，该方法本身包含一个特定的语句。之后，我们添加了一行不需要作为控制台输出的代码，但为了检查我们的代码是否正常工作，我们将其添加进来。
• 最后，我们将使用then()方法（用于打印结果）和catch()方法（用于捕获错误）来调用我们的方法。

Javascript

<script>
    let checkNumValue = (num) => {
        return new Promise((resolve, reject) => {
            if (num === 0) {
                console.log("Zero number received...!!");
                reject("Stop code's execution since "
                    + "invalid number caught...");
            }
            console.log("This line is of no use, hence "
                + "not required in output...!!!");
        });
    };
 
    checkNumValue(0)
        .then((result) => console.log(result))
        .catch((error) => console.log("Caught Error: " + error));
</script>

输出：

Zero number received...!!
This line is of no use, hence not required in output...!!!
Caught Error: Stop code's execution since invalid number caught...

如我们所见，在浏览器控制台中打印出了一个不需要的行，原因是当调用reject()方法时，它会执行工作并使控制流继续，直到在reject()方法执行语句后明确传递的内容停止执行。

示例2：

• 在这个示例中，我们将考虑前一个示例的代码，并进一步对函数本身进行一些修改，使其根据需要可执行。
• 在该方法中，在reject()函数调用之后，我们将添加一个空的return语句，使执行在该点结束或完成，并且不会继续向下移动。
• 通过这个return语句，那个额外的行将被省略，并且不会作为输出显示在浏览器控制台上。

Javascript

<script>
    let checkNumValue = (num) => {
        return new Promise((resolve, reject) => {
            if (num === 0) {
                console.log("Zero number received...!!");
                reject("Stop code's execution since "
                    + "invalid number caught...");
                return; // This line marks end of execution
            }
            console.log("This line is of no use, hence "
                + "not required in output...!!!");
        });
    };
 
    checkNumValue(0)
        .then((result) => console.log(result))
        .catch((error) => console.log("Caught Error: " + error));
</script>

输出结果:

Zero number received...!!
Caught Error: Stop code's execution since invalid number caught...