Promise.prototype.then()学习

Posted 2021-06-27 胖鹅68

文章目录

• 一、问题描述
• 二、介绍 Promise.prototype.then方法介绍
• • then 中的回调函数 返回值
• 三、解析代码

一、问题描述

最近审核一个同事的代码如下，感觉Promise.all()用法使用有点新奇，与我平时使用不一致，效果应该是没有问题的，不然测试就会测试出来

// 防控圈切换场景，支持按防控圈，资源类型过滤统计
queryResource (bClear) {
  const params = {
  }
  let _resCamera = []
  let _resPolice = []
  const queryResource = API.queryResource(params).then(res => {
	_resCamera = res?.data?.records || []
  })
  const getPoliceProtectionInfo = API.getPoliceProtectionInfo({ circle: this.circleType }).then(res => {
	const list = res?.data || []
	_resPolice = list
  })
  Promise.all([queryResource, getPoliceProtectionInfo]).then(res => {
	this.resourceData = [..._resCamera, ..._resPolice]
  })
},

1. API.queryResource() 和 API.getPoliceProtectionInfo() 两个方法返回的是promise
2. promise.then()方法返回的也是Promise对象
3. queryResource 到底代表的是第一个promise还是then()方法的promise?
4. then()方法返回的promise 状态是怎么改变的？由谁来决定？

二、介绍 Promise.prototype.then方法介绍

1. 语法格式

p.then(onFulfilled[, onRejected]);

p.then(value => {
  // fulfillment
}, reason => {
  // rejection
});

2. 参数

• onFulfilled 可选 —— 当 Promise 变成接受状态（fulfilled）时调用的函数
• onRejected 可选 —— 当 Promise 变成拒绝状态（rejected）时调用的函数

3. 返回值——then() 方法返回一个新 的Promise

then 中的回调函数 返回值

• 返回值是非promise
  • 返回了一个值，那么 then 返回的 Promise 将会成为接受状态，并且将返回的值作为接受状态的回调函数的参数值。
  • 没有返回任何值，那么 then 返回的 Promise 将会成为接受状态，并且该接受状态的回调函数的参数值为 undefined。
• 返回值是异常
  • 抛出一个错误，那么 then 返回的 Promise 将会成为拒绝状态，并且将抛出的错误作为拒绝状态的回调函数的参数值。
• 返回值是promise
  • 返回一个已经是接受状态的 Promise，那么 then 返回的 Promise 也会成为接受状态，并且将那个 Promise 的接受状态的回调函数的参数值作为该被返回的Promise的接受状态回调函数的参数值。
  • 返回一个已经是拒绝状态的 Promise，那么 then 返回的 Promise 也会成为拒绝状态，并且将那个 Promise 的拒绝状态的回调函数的参数值作为该被返回的Promise的拒绝状态回调函数的参数值。
  • 返回一个未定状态（pending）的 Promise，那么 then 返回 Promise 的状态也是未定的，并且它的终态与那个 Promise 的终态相同；同时，它变为终态时调用的回调函数参数与那个 Promise 变为终态时的回调函数的参数是相同的。

三、解析代码

1. API.queryResource(params).then() 是链式调用，返回的结果是then()方法的promise
2. 根据MDN 的解释，then()方法的promise 的状态要在执行then()方法之后才能确定
3. 当前面两个then()方法执行完了之后，才会执行 all().then()方法
4. 因此，一定是执行是执行完then()方法之后，queryResource的状态才会改变;(getPoliceProtectionInfo一样)

API.queryResource(params).then(res => {
        _resCamera = res?.data?.records || []
})

5. 测试，打印出来的all().then(res=>{console.log(res)})的结果都是undefined