有时候我们会遇到需要同时请求多个接口的需求,比如批量下载并打包,或者根据多个id
请求多个详情并合并把结果成一个数组,这个时候可以用Promise.all
。
下边的代码大家可以直接复制到F12
控制台运行。
先写一个模拟后台接口的函数:
function getAjax(time){
return new Promise(resolve=>{
setTimeout(()=>{
resolve("time:"+time)
},time*1000)
})
}
time
用来模拟每个接口返回的时间不同。
接下来可以用Promise.all
调用了,注意,参数是一个数组:
Promise.all([getAjax(3),getAjax(1),getAjax(2)]).then(res=>{
console.log(res)
})
在控制台运行,可以看到返回了:
['time:3', 'time:1', 'time:2']
这就是Promise.all
的用法,无论接口的返回时间长或者短,Promise.all
返回的顺序都是按照你传入的接口数组的顺序排列的。
还有一种需求是,我需要请求多个接口,但是我只需要返回最快的那个,这个时候可以用Promise.race
:
Promise.race([getAjax(3),getAjax(1),getAjax(2)]).then(res=>{
console.log(res)
})
在控制台运行,可以看到,接口时间最短的那个先返回了,其他的结果都被抛弃了:
time:1
这就是Promise.race
的用法。
如果大家懒得去运行,可以看我运行的截图:
Promise
还有一些其他的很有用的方法,大家有兴趣可以查阅一下。