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

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

脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用

前言:

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

axios.all和axios.spread

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
***注意这里的$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官方文档中对一次性并发多个请求示例如下:

1
2
3
4
5
6
7
8
9
10
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请求可能都放在一个文件中,并且对加了拦截器等等。示例如下:

1
2
3
4
5
6
7
export const cargoDayNumber = (data) => {
 return axios.request({
  url: '/api/zz-xt/statistical/areas',
  method: 'post',
  data: data
 })
}

在vue文件中的使用如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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,示例如下

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

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

蓄力AI

微信公众号搜索 “ 脚本之家 ” ,选择关注

程序猿的那些事、送书等活动等着你

原文链接:https://blog.csdn.net/qq_41619796/article/details/102595293

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!

相关文章

  • vue excel上传预览和table内容下载到excel文件中

    vue excel上传预览和table内容下载到excel文件中

    这篇文章主要介绍了vue excel上传预览和table内容下载到excel文件中,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-12-12
  • 关于vue2使用swiper4的踩坑记录

    关于vue2使用swiper4的踩坑记录

    最近写vue的一个练手项目需要在里面实现一个轮播图,想到去用第三方插件,百度了一轮,发现大部分都是swiper这个插件,这篇文章主要给大家介绍了关于vue2使用swiper4踩坑的相关资料,需要的朋友可以参考下
    2022-01-01
  • 关于vue.js过渡css类名的理解(推荐)

    关于vue.js过渡css类名的理解(推荐)

    这篇文章主要介绍了关于vue.js过渡css类名的理解,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-04-04
  • VUE实现Studio管理后台之鼠标拖放改变窗口大小

    VUE实现Studio管理后台之鼠标拖放改变窗口大小

    这篇文章主要介绍了VUE实现Studio管理后台之鼠标拖放改变窗口大小 的相关知识,本文通过实例代码给大家介绍的非常详细,对大家的工作或学习具有一定的参考价值,需要的朋友可以参考下
    2020-03-03
  • Vue.js中v-for指令的用法介绍

    Vue.js中v-for指令的用法介绍

    这篇文章介绍了Vue.js中v-for指令的用法,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-03-03
  • vue中ref和$refs获取元素dom、获取子组件数据与方法调用示例

    vue中ref和$refs获取元素dom、获取子组件数据与方法调用示例

    在Vue3中要获取子组件的DOM节点,你可以使用ref来引用子组件,然后通过$refs来访问子组件的DOM,下面这篇文章主要给大家介绍了关于vue中ref和$refs获取元素dom、获取子组件数据与方法调用的相关资料,需要的朋友可以参考下
    2024-07-07
  • Vue组件封装之input输入框实战记录

    Vue组件封装之input输入框实战记录

    在vue中会将常用的组件进行封装,下面这篇文章主要给大家介绍了关于Vue组件封装之input输入框的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2022-10-10
  • Vue privide 和inject 依赖注入的使用详解

    Vue privide 和inject 依赖注入的使用详解

    这篇文章主要介绍了Vue privide 和inject 依赖注入的用法,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-10-10
  • vue form check 表单验证的实现代码

    vue form check 表单验证的实现代码

    这篇文章主要介绍了vue form check 表单验证的实现代码,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-12-12
  • Vue自定义指令详解

    Vue自定义指令详解

    这篇文章主要为大家详细介绍了Vue自定义指令的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-07-07

最新评论