多接口同时调用 propmise.all

微信公众号：前端程序猿之路
关注可了解更多的前端知识，反馈问题或建议，请公众号留言。
如果你觉得公众号内容对你有帮助，欢迎关注并转载

最近工作过程中，要同时调用几个有关联的接口，发现了一个非常好用的方法 Promise.all

1.官方解释Promise.all

Promise.all(iterable) 方法返回一个 Promise 实例，此实例在 iterable 参数内所有的 promise 都“完成（resolved）”或参数中不包含 promise 时回调完成（resolve）；如果参数中 promise 有一个失败（rejected），此实例回调失败（reject），失败的原因是第一个失败 promise 的结果

2.通俗易懂解释

Promise.all可以同时调用几个有关联的方法，并按调用方法的顺序将每个方法返回的结果组成一个数组返回

3.vue中使用举例

var getBaseData = new Promise((resolve, reject) => {
	this.$vaHttp.post(url1).then(res => {
		resolve(res)
	}).catch(err => {
		reject(err)
	})
})
var getAllData = new Promise((resolve, reject) => {
	this.$vaHttp.post(url2).then(res => {
		resolve(res)
	}).catch(err => {
		reject(err)
	})
})
 var getTreeData = new Promise((resolve, reject) => {
	this.$vaHttp.post(url3).then(res => {
		resolve(res)
	}).catch(err => {
		reject(err)
	})
})
Promise.all([getBaseData, getAllData, getTreeData]).then(res => {
	// res为三个接口返回结果组成的数组
	console.log(res)
	this.getData(res)
})

如果其他方法必须在这三个接口调用完成之后才能调用，就可以使用promise.all,使用promise.all当多个接口调用时，调用时间为接口时长最长的那个。

4.注意

但是要注意，promise.all如果参数中 promise 有一个失败（rejected），此实例回调失败（reject），失败的原因是第一个失败 promise 的结果，这个时候可以将catch里面的reject(err)修改为resolve(err),这样只是将错误原因返回在进行处理，而不会阻断其他方法的调用

5.关于promise的其它静态方法

Promise.allSettled(iterable)

等到所有promises都已敲定（settled）（每个promise都已兑现（fulfilled）或已拒绝（rejected））。
返回一个promise，该promise在所有promise完成后完成。并带有一个对象数组，每个对象对应每个promise的结果。

Promise.any(iterable)

接收一个Promise对象的集合，当其中的一个 promise 成功，就返回那个成功的promise的值。
Promise.race(iterable)
当iterable参数里的任意一个子promise被成功或失败后，父promise马上也会用子promise的成功返回值或失败详情作为参数调用父promise绑定的相应句柄，并返回该promise对象。

Promise.reject(reason)

返回一个状态为失败的Promise对象，并将给定的失败信息传递给对应的处理方法

Promise.resolve(value)

返回一个状态由给定value决定的Promise对象。如果该值是thenable(即，带有then方法的对象)，返回的Promise对象的最终状态由then方法执行决定；否则的话(该value为空，基本类型或者不带then方法的对象),返回的Promise对象状态为fulfilled，并且将该value传递给对应的then方法。通常而言，如果您不知道一个值是否是Promise对象，使用Promise.resolve(value) 来返回一个Promise对象,这样就能将该value以Promise对象形式使用。

6.参考链接：

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise/all