axios如何进行并发请求处理axios.all和axios.spread
axios.all(iterable)和axios.spread(callback)当我们同时处理多个请求的时候,就会用到axios的并发处理,用到的方法就是axios.all(iterable)和axios.spread(callback)。axios.all方法跟promise.all方法一样里边传一个数组,当数组内的请求全部完成时,再进行下一步,如果有一步没有完成就停止操作。我们用代码来测试
·
axios.all(iterable)和axios.spread(callback)
当我们同时处理多个请求的时候,就会用到axios的并发处理,用到的方法就是axios.all(iterable)和axios.spread(callback)。axios.all方法跟promise.all方法一样里边传一个数组,当数组内的请求全部完成时,再进行下一步,如果有一步没有完成就停止操作。我们用代码来测试一下
function foo() {
return axios.get("http://jsonplaceholder.typicode.com/posts")
}
function bar() {
return axios.get("http://jsonplaceholder.typicode.com/posts/1")
}
axios.all([foo(), bar()]).then(axios.spread((foo, bar) => {
console.log(foo.data, 11111111)
console.log(bar.data, 22222)
})).catch(err=>{
console.log(err,258)
})
这里的http://jsonplaceholder.typicode.com是一个网上的模拟数据,大家也可以用。我们来看看效果,当请求全部完成时,我们就log出来data
我们现在来测试一下,当有一个请求出问题,会不会出来另一个成功请求,我们来改一下bar里边的请求
function bar() {
return axios.get("http://posts/1")
}
效果:
经过测试我们发现,当有任意一个请求出问题都不会返回另一个成功数据。
我们一般处理并发请求,肯定不是拿到实际返回的数据,一定会对返回数据进行处理,所以axios.spread的作用就是对返回数据进行处理。通过我们的第一个例子就可以看出来,那我们不加这个直接log会出现什么问题呢?别着急啊宝贝,咱们试一下。
axios.all([foo(),bar()]).then((foo,bar)=>{
console.log(foo)
console.log(bar)
})
效果:
所以我们可以看出axios.all和axios.spread是配合使用的,axios.spread目的是有针对性的对返回数据进行处理
更多推荐
已为社区贡献3条内容
所有评论(0)