axios.all()和axios.spread()解决Vue的高并发请求问题

前言

我们在Vue项目开发当中经常会遇到一个组件渲染需要的基础数据可能需要向后台发送很多请求，此时，我们一一发送显然是不合理的，一般情况下我们都是使用axios.all()方法进行并发请求处理

标准格式

这里是在VsCode上敲出axios.all（我装了插件）自动生成的格式，可以看出axios.all接收一个数组参数，并且其是基于promise的
我们一般处理并发请求，肯定不是拿到实际返回的数据，一定会对返回数据进行处理，所以axios.spread的作用就是对返回数据进行处理。

axios.all([callback1,callback2]).then(axios.spread((res1, res2)=>{}))

还有一种格式就是

axios.all([]).then(
    result => {}
)

案例

这是菜鸟教程上给的例子

functiongetUserAccount(){return axios.get('/user/12345');}functiongetUserPermissions(){return axios.get('/user/12345/permissions');}
axios.all([getUserAccount(),getUserPermissions()]).then(axios.spread(function(acct, perms){// 两个请求现在都执行完成}));

下面这个是我自己开发时候写到的一个例子

asyncgetMenuList(){let sendArr =[// 这里是因为我在main.js上将axios挂载到了$httpthis.$http.get('menus'),this.$http.get('users',{
          params:this.queryInfo
        })]this.$http.all(sendArr).then((result)=>{const{ data: res1 }= result[0]const{ data: res2 }= result[1]
        console.log(res2)if(res1.meta.status !==200){returnthis.$message.error(res1.meta.msg)}this.menuList = res1.data
        if(res2.meta.status !==200){returnthis.$message.error(res2.meta.msg)}this.userList = res2.data
      })// const { data: res } = await this.$http.get('menus')// if (res.meta.status !== 200) {//   return this.$message.error(res.meta.msg)// }// this.menuList = res.data}