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

111

我们现在来测试一下,当有一个请求出问题,会不会出来另一个成功请求,我们来改一下bar里边的请求
  function bar() {
            return axios.get("http://posts/1")
        }

效果:

11

经过测试我们发现,当有任意一个请求出问题都不会返回另一个成功数据。
我们一般处理并发请求,肯定不是拿到实际返回的数据,一定会对返回数据进行处理,所以axios.spread的作用就是对返回数据进行处理。通过我们的第一个例子就可以看出来,那我们不加这个直接log会出现什么问题呢?别着急啊宝贝,咱们试一下。
   axios.all([foo(),bar()]).then((foo,bar)=>{
            console.log(foo)
            console.log(bar)
        })

效果:

11

所以我们可以看出axios.all和axios.spread是配合使用的,axios.spread目的是有针对性的对返回数据进行处理
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐