【js Promise】前端批量请求之：Promise.all和Promise.race

有时候我们会遇到需要同时请求多个接口的需求，比如批量下载并打包，或者根据多个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还有一些其他的很有用的方法，大家有兴趣可以查阅一下。

上一篇：html+css用一个div画出太极图
下一篇：小数点保留两位的js正则表达式