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

最新推荐文章于 2025-02-18 20:30:00 发布

云墨-款哥的博客

最新推荐文章于 2025-02-18 20:30:00 发布

阅读量7.9k

点赞数 19

分类专栏： Vue JavaScript 文章标签： javascript 经验分享 vue 前端框架

本文链接：https://blog.csdn.net/m0_56026872/article/details/124272803

版权

JavaScript 同时被 2 个专栏收录

22 篇文章

订阅专栏

Vue

12 篇文章

订阅专栏

本文介绍了在Vue项目开发中如何使用axios.all()方法进行并发请求，以提高效率。通过axios.all结合axios.spread，可以同时处理多个异步请求的结果。文中提供了一个从菜鸟教程获取的案例以及作者个人开发时的实践示例，展示了如何解析并处理并发请求返回的数据，用于填充组件所需的基础数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

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

标准格式

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

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

还有一种格式就是

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

案例

这是菜鸟教程上给的例子

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

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

async getMenuList() {
      let sendArr = [
      // 这里是因为我在main.js上将axios挂载到了$http
        this.$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) {
          return this.$message.error(res1.meta.msg)
        }
        this.menuList = res1.data
        if (res2.meta.status !== 200) {
          return this.$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
    }