JavaScript Promise返回值详解

爱被打了一巴掌 2022-03-29 13:13 345阅读 0赞

### JavaScript Promise返回值详解 ###

*  Promise回顾
 *  Promise回调函数返回非Promise值
 *  Promise回调函数返回Promise对象
 *  Promise回调函数中抛出错误
 *  总结

# Promise回顾 #

Promise对象是JavaScript ES6标准中一个重要的内容，它是为了异步而生的，相比于经典的回调函数写法，在处理大量异步任务时使用Promise链在可读性上会远远优于回调函数导致的回调地狱，本文建立在读者已经对Promise有所了解的情况下，如果你还不了解Promise，可以参考MDN上的[这篇文章][Link 1]。

下面我们先来简要回顾一下Promise对象的性质，如果你已经足够熟悉，请前往下一节内容。

Promise有三种状态，如果用`Promise()`构造器创建一个Promise对象，当被创建时，它的状态是`pending`，如果一个Promise对象的`resolve`方法被调用，它的状态会变成`fulfilled`，而如果一个Promise对象的`reject`方法被调用，它的状态会变成`rejected`。此外，还有两种初始化Promise对象的方法，分别是`Promise.resolve`方法和`Promise.reject`方法，前者会直接返回一个状态为`fulfilled`的Promise对象而后者会直接返回一个状态为`rejected`的Promise对象。

在一个Promise链中，如果一个Promise状态变成了`fulfilled`，它会自动在Promise链中向下寻找，直到发现一个`then`方法，并执行其中的第一个参数函数，而如果一个Promise的状态变成了`rejected`，它会在Promise链中向下寻找，直到发现一个带有两个参数的`then`方法并执行它的第二个参数函数或发现一个`catch`方法并执行它的参数函数。

要知道，`Promise.prototype.then`和`Promise.prototype.catch`都会返回一个Promise对象，这是Promise链能生效的关键，这篇文章讨论的重点就是这两个方法的返回值。

**注意**：为了增强可读性，本文中涉及到`Promise.prototype.then`都只传入一个参数，作为`fulfilled`状态的回调函数，`rejected`状态的回调函数在`Promise.prototype.catch`中定义。

# Promise回调函数返回非Promise值 #

当一个`Promise.prototype.then`方法被调用时，且在回调函数中返回的值是一个非Promise对象时，它会生成一个状态为`fulfilled`的新的Promise对象，并把该返回值传入下一个回调函数，看下面这个例子：

Promise.resolve().then(function() { 
      return 'Hello World';
    })
    .then(function(value) { 
      console.log(`fulfilled: ${ value}`); // 'fulfilled: Hello World'
    })
    .catch(function(value) { 
      console.log(`rejected: ${ value}`);
    });

我们先用`Promise.resolve`生成了一个`fulfilled`状态的Promise对象以便调用`then`方法，在它的回调函数中我们返回了一个字符串`Hello World`，可以看到Promise链中第二个`then`方法的回调函数被调用，打印出了`fulfilled: Hello World`，说明前一个回调函数的返回值被传入，且在Promise链的上一环节返回的新Promise状态为`fulfilled`。

当一个`Promise.prototype.catch`方法被调用，且在回调函数中返回的值是一个非Promise对象，它仍然会生成一个状态为`fulfilled`的新的Promise对象，并把该返回值传入下一个回调函数，相当于错误已经被捕获，看下面这个例子：

Promise.reject().catch(function() { 
      return 'Hello World';
    })
    .then(function(value) { 
      console.log(`fulfilled: ${ value}`); // 'fulfilled: Hello World'
    })
    .catch(function(value) { 
      console.log(`rejected: ${ value}`);
    })

我们先用`Promise.reject`生成了一个`rejected`状态的Promise对象，这时第一个`catch`方法触发，在它的回调函数里返回了字符串`Hello World`，此后第一个`then`方法触发，打印出了`fulfilled: Hello World`，说明前一个回调函数的返回值被传入，且在Promise链的上一环节返回的新Promise状态为`fulfilled`。

你可以[动手试试][Link 2]上面的例子，自己尝试着修改一些代码并查看返回值，有助于对这一节的内容有更深的理解。

# Promise回调函数返回Promise对象 #

如果Promise的回调函数中返回的是Promise，那么无论触发的是Promise链中的`then`方法还是`catch`方法，新生成的Promise对象的状态都直接取决于回调函数中返回的Promise对象的状态，传进下一个回调函数的值也取决于这个被返回的Promise对象，让我们看下面几个例子：

Promise.resolve().then(function() { 
      return Promise.resolve('Hello World');
    })
    .then(function(value) { 
      console.log(`fulfilled: ${ value}`); // 'fulfilled: Hello World'
    })
    .catch(function(value) { 
      console.log(`rejected: ${ value}`);
    });

Promise.resolve().then(function() { 
      return Promise.reject('Hello World');
    })
    .then(function(value) { 
      console.log(`fulfilled: ${ value}`);
    })
    .catch(function(value) { 
      console.log(`rejected: ${ value}`); // 'rejected: Hello World'
    });

Promise.reject().catch(function() { 
      return Promise.resolve('Hello World');
    })
    .then(function(value) { 
      console.log(`fulfilled: ${ value}`); // 'fulfilled: Hello World'
    })
    .catch(function(value) { 
      console.log(`rejected: ${ value}`);
    });

Promise.reject().catch(function() { 
      return Promise.reject('Hello World');
    })
    .then(function(value) { 
      console.log(`fulfilled: ${ value}`);
    })
    .catch(function(value) { 
      console.log(`rejected: ${ value}`); // 'rejected: Hello World'
    });

你可以[动手试试][Link 3]上面的例子来更深刻地感受一下返回Promise对象与返回其他值时的不同。

通过这几个例子可以看到，如果回调函数中返回Promise对象，无论是`then`方法还是`catch`方法生成的Promise对象都直接取决于回调函数中的这个Promise对象。

# Promise回调函数中抛出错误 #

如果Promise的回调函数中抛出了一个错误，则会生成一个状态为`rejected`的Promise，并将这个错误作为参数传给Promise链的下一个回调函数，看下面两个例子：

Promise.resolve().then(function() { 
      throw new Error('Oops!');
    })
    .then(function(value) { 
      console.log('fulfilled');
      console.log(value.message);
    })
    .catch(function(value) { 
      console.log('rejected'); // 'rejected'
      console.log(value.message); // 'Oops!'
    });

Promise.reject().catch(function() { 
      throw new Error('Oops!');
    })
    .then(function(value) { 
      console.log('fulfilled');
      console.log(value.message);
    })
    .catch(function(value) { 
      console.log('rejected'); // 'rejected'
      console.log(value.message); // 'Oops!'
    })

你可以[动手试试][Link 4]来感受一下这种情况下抛出错误对生成的Promise对象的影响。

可以看到，这种情况下`catch`的回调函数被执行，说明抛出错误后，返回的Promise状态是`rejected`，并且传入Promise链下一环节的值是这个**错误对象**。

# 总结 #

*  当Promise的回调函数返回非Promise对象的值时，`then`和`catch`都生成一个状态为`fulfilled`的Promise对象，并把该返回值传入Promise链的下一环节。
 *  当Promise的回调函数返回值为Promise对象时，生成的Promise对象的状态由被返回的Promise对象决定，传入Promise链下一环节的值也由这个被返回的Promise决定。
 *  当Promise的回调函数中抛出错误时，`then`和`catch`都生成一个状态为`rejected`的Promise对象，并把抛出的错误对象传入Promise链的下一环节。

[Link 1]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise
[Link 2]: https://codepen.io/dakoala/pen/oJMoEv?editors=1111
[Link 3]: https://codepen.io/dakoala/pen/jXpazZ?editors=1111
[Link 4]: https://codepen.io/dakoala/pen/oJMqLR?editors=1111