Promise.then() 方法与 Promise.catch() 方法的使用注意事项

介绍

Promise 是 JavaScript 中一种处理异步操作的方式，它可以更好地处理回调地狱的问题。Promise.then() 方法和 Promise.catch() 方法是 Promise 中常用的方法，它们分别用于处理 Promise 成功和失败的回调函数。但是在使用这两个方法的时候，我们需要注意一些问题。

Promise.then() 方法

语法

promise.then(onFulfilled[, onRejected]);

其中，onFulfilled 是成功的回调函数，onRejected 是失败的回调函数（可选）。

注意事项

1. then() 方法返回一个新的 Promise 对象，它的状态和值取决于回调函数的执行结果。
2. 如果回调函数返回一个 Promise 对象，那么当前 Promise 对象将被链式调用，直到最后一个 Promise 对象被 resolved 或 rejected。
3. 如果回调函数返回一个非 Promise 对象，当前 Promise 对象将被 resolved 并把该值传递给下一个 Promise 对象。
4. 如果没有提供 rejected 回调函数（只提供了一个 then() 方法），那么错误将被传递到后续的 rejected 回调函数中处理。
5. then() 方法中的回调函数是异步执行的。

示例代码

let promise = new Promise((resolve, reject) => {
    setTimeout(()=>resolve(1), 1000)
});

promise.then(result => {
    console.log(`promise resolved with result ${result}`);
    return 2;
}).then(result => {
    console.log(`chain then result ${result}`);
    return new Promise((resolve, reject) => {
        setTimeout(() => resolve(3), 1000);
    });
}).then(result => {
    console.log(`chain then result ${result}`);
});

let promise2 = new Promise((resolve, reject) => {
    setTimeout(()=>reject(new Error('promise rejected')), 1000)
});

promise2.then(result => {
    console.log(`promise resolved with result ${result}`);
}, e => {
    console.error(`promise failed with error ${e}`);
});

输出结果：

promise resolved with result 1
chain then result 2
chain then result 3
promise failed with error Error: promise rejected
    at eval (eval at <anonymous> (evalmachine.<anonymous>:6:24), <anonymous>:2:25)
    ...

Promise.catch() 方法

语法

promise.catch(onRejected);

其中，onRejected 是失败的回调函数。

注意事项

1. catch() 方法返回一个新的 Promise 对象，它的值和状态取决于回调函数的执行结果。
2. catch() 方法可以链式调用 apply() 或 call() 方法来改变回调函数执行时的 this 值。
3. catch() 方法只会处理 Promise 失败的情况，成功的情况可以使用 then() 方法来处理。
4. catch() 方法如果抛出异常，将会被传递到后续的 catch() 方法。
5. catch() 方法也是异步执行的。

示例代码

let promise = new Promise((resolve, reject) => {
    setTimeout(()=>reject(new Error('promise rejected')), 1000)
});

promise.catch(e => {
    console.error(`promise failed with error ${e}`);
}).then(() => {
    console.log('promise catch handled');
}).catch(e => {
    console.error('handle failed catch error');
});

输出结果：

promise failed with error Error: promise rejected
    at eval (evalmachine.<anonymous>:4:25)
    ...
promise catch handled

总结

Promise.then() 方法和 Promise.catch() 方法是 Promise 中两种处理异步操作的方式。在使用这两个方法时，需要注意它们的回调函数是异步执行的，可以链式调用多个方法，可以处理 Promise 中抛出的异常，需要注意 catch() 方法只能处理 Promise 失败的情况。在编写异步操作时，合理使用 Promise.then() 方法和 Promise.catch() 方法，可以避免回调地狱问题，提升代码的可维护性和可读性。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65a68c20add4f0e0fff56885