axios如何进行并发请求处理axios.all和axios.spread

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目的是有针对性的对返回数据进行处理