axios解决高并发的方法:axios.all()与axios.spread()的操作

 更新时间:2020年11月09日 10:47:55   作者:浩星  
这篇文章主要介绍了axios解决高并发的方法:axios.all()与axios.spread()的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

前言:

很多时候,我们可能需要同时调用多个后台接口,就会高并发的问题,一般解决这个问题方法:

axios.all和axios.spread

***注意这里的$get是封装的axios方法
//方法一:
searchTopic() {
 return this.$axios({
       url:'地址1',
       method:'方式',//get/post/patch/put/deleted
       params:{//参数get所以用params。post.put用data
       }
      })
}
 //方法二:
searchs(){
     return this.$axios({
       url:'地址1',
       method:'方式',//get/post/patch/put/deleted
       params:{//参数get所以用params。post.put用data
       }
      })
     },
 
axios.all([searchTopic(), searchs()])
 .then(axios.spread(function (allSearchTopic, allSearchs) {
  debugger//打印可以拿到所有的返回值
  allSearchTopic == 方法一的返回值
  allSearchs == 方法二的返回值
 }));

补充知识:axios.all及Promise.all合并多个请求且都返回数据后进行其他操作

很多时候,我们需要同时向后端进行多个请求,当所有请求都返回数据后,再进行一些操作。

比如:初始化页面时,可能需要初始化一些基础数据,才能进行操作。

获取这些基础数据,可能需要向后端发送request1,request2。。。

等多个请求,而后续的操作说需要request1,request2等都正确返回数据后才能进行。

在axios官方文档中对一次性并发多个请求示例如下:

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){
  //当这两个请求都完成的时候会触发这个函数,两个参数分别代表返回的结果
 }))

但是很多时候,我们在项目中并不会直接去axios.get,axios请求可能都放在一个文件中,并且对加了拦截器等等。示例如下:

export const cargoDayNumber = (data) => {
 return axios.request({
  url: '/api/zz-xt/statistical/areas',
  method: 'post',
  data: data
 })
}

在vue文件中的使用如下:

let r1 = carVisitTime({ createTime: '2019-06-27' })
   let r2 = statistic({ createTime: '2019-06-27' })
   let r3 = cargoDayNumber({ createTime: '2019-07-01' })
   let r4 = enterpriseRanking()
   axios.all([r1, r2, r3, r4]).then(
    axios.spread((r1, r2, r3, r4) => {
     
     this.numberVehicleVisits = r1.data      
     this.loadingDateRank.loading = r2.data.loading
     this.loadingDateRank.unloading = r2.data.unloading 
     
     this.loadingAreasRank.loadingRegionalList = r3.data.inflow
     this.loadingAreasRank.unloadingRegionalList = r3.data.outflow 
   
     this.enterpriseLoadWeight.enterpriseLoadingRankList = r4.data.loadingRank
     this.enterpriseLoadWeight.enterpriseUnloadingRankList = r4.data.unloadingRank
    })
   )

除了axios.all,我们也可以使用Promise.all,示例如下

 Promise.all([p1, p2]).then(function(values) {
    console.log(values);//values为一个数组
    ///进行你的下一步操作
   });

以上这篇axios解决高并发的方法:axios.all()与axios.spread()的操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue2 自定义动态组件所遇到的问题

    vue2 自定义动态组件所遇到的问题

    这篇文章主要介绍了vue2 自定义 动态组件的实现方法,需要的朋友可以参考下
    2017-06-06
  • element-ui 关于获取select 的label值方法

    element-ui 关于获取select 的label值方法

    今天小编就为大家分享一篇element-ui 关于获取select 的label值方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • vue-cli系列之vue-cli-service整体架构浅析

    vue-cli系列之vue-cli-service整体架构浅析

    这篇文章主要介绍了vue-cli系列之vue-cli-service整体架构浅析,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-01-01
  • vue三种模糊查询方式代码实例

    vue三种模糊查询方式代码实例

    这篇文章主要给大家介绍了关于vue三种模糊查询方式的相关资料,在vue中模糊搜索主要是用computed属性实现,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-06-06
  • Vue组件化常用方法之组件传值与通信

    Vue组件化常用方法之组件传值与通信

    这篇文章主要给大家介绍了关于Vue组件化常用方法之组件传值与通信的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-03-03
  • Vue2.0使用嵌套路由实现页面内容切换/公用一级菜单控制页面内容切换(推荐)

    Vue2.0使用嵌套路由实现页面内容切换/公用一级菜单控制页面内容切换(推荐)

    这篇文章主要介绍了Vue2.0使用嵌套路由实现页面内容切换/公用一级菜单控制页面内容切换,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-05-05
  • vue.js父子组件传参的原理与实现方法

    vue.js父子组件传参的原理与实现方法

    这篇文章主要介绍了vue.js父子组件传参的原理与实现方法,结合实例形式分析了vue.js父子组件传参的基本原理、实现方法与相关操作注意事项,需要的朋友可以参考下
    2023-04-04
  • 聊聊vue 中的v-on参数问题

    聊聊vue 中的v-on参数问题

    这篇文章主要介绍了聊聊vue 中的v-on参数问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2021-01-01
  • 用vue写一个日历

    用vue写一个日历

    这篇文章主要介绍了如何利用vue写一个日历,帮助大家更好的理解和学习vue,感兴趣的朋友可以了解下
    2020-11-11
  • Vue.js系列之项目搭建(1)

    Vue.js系列之项目搭建(1)

    今天要讲讲Vue2.0了。最近将公司App3.0用vue2.0构建了一个web版,因为是第一次使用vue,而且一开始使用的时候2.0出来一个月不到,很多坑都是自己去踩的,现在项目要上线了,所以记录一些过程
    2017-01-01

最新评论