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


Posted in Javascript onNovember 09, 2020

前言:

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

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()的操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
8款非常棒的响应式jQuery 幻灯片插件推荐
Feb 02 Javascript
JavaScript限定复选框的选择个数示例代码
Aug 25 Javascript
Javascript数据结构与算法之列表详解
Mar 12 Javascript
微信小程序 Record API详解及实例代码
Sep 30 Javascript
浅谈Angular中ngModel的$render
Oct 24 Javascript
利用Vue.js实现求职在线之职位查询功能
Jul 03 Javascript
js处理包含中文的字符串实例
Oct 11 Javascript
javascript实现最长公共子序列实例代码
Feb 05 Javascript
vue源码nextTick使用及原理解析
Aug 13 Javascript
vue在线动态切换主题色方案
Mar 26 Javascript
Vue发布订阅模式实现过程图解
Apr 30 Javascript
vuex Module将 store 分割成模块的操作
Dec 07 Vue.js
vue 解决在微信内置浏览器中调用支付宝支付的情况
Nov 09 #Javascript
详解Vue中的watch和computed
Nov 09 #Javascript
vue-axios同时请求多个接口 等所有接口全部加载完成再处理操作
Nov 09 #Javascript
解决vue 使用axios.all()方法发起多个请求控制台报错的问题
Nov 09 #Javascript
Echarts在Taro微信小程序开发中的踩坑记录
Nov 09 #Javascript
Vue路由权限控制解析
Nov 09 #Javascript
在vue项目中promise解决回调地狱和并发请求的问题
Nov 09 #Javascript
You might like
调整优化您的LAMP应用程序的5种简单方法
2011/06/26 PHP
checkbox 多选框 联动实现代码
2008/10/22 Javascript
Javascript 作用域使用说明
2009/08/13 Javascript
详解强大的jQuery选择器之基本选择器、层次选择器
2012/02/07 Javascript
Javascript 面向对象(一)(共有方法,私有方法,特权方法)
2012/05/23 Javascript
AngularJS过滤器filter用法实例分析
2016/11/04 Javascript
基于vue v-for 循环复选框-默认勾选第一个的实现方法
2018/03/03 Javascript
详解如何创建并发布一个 vue 组件
2018/11/08 Javascript
微信二次分享报错invalid signature问题及解决方法
2019/04/01 Javascript
详解vuex持久化插件解决浏览器刷新数据消失问题
2019/04/15 Javascript
jQuery实现数字华容道小游戏(实例代码)
2020/01/16 jQuery
extjs图形绘制之饼图实现方法分析
2020/03/06 Javascript
javascript canvas封装动态时钟
2020/09/30 Javascript
Python两个整数相除得到浮点数值的方法
2015/03/18 Python
Python实现树的先序、中序、后序排序算法示例
2017/06/23 Python
pycharm使用matplotlib.pyplot不显示图形的解决方法
2018/10/28 Python
Python面向对象之类和对象属性的增删改查操作示例
2018/12/14 Python
python实现将多个文件分配到多个文件夹的方法
2019/01/07 Python
Python自动抢红包教程详解
2019/06/11 Python
Python列表与元组的异同详解
2019/07/02 Python
python实现大战外星人小游戏实例代码
2019/12/26 Python
Python基于BeautifulSoup爬取京东商品信息
2020/06/01 Python
美国顶级防滑鞋:Shoes For Crews
2017/03/27 全球购物
迪士尼英国官方商店:shopDisney UK
2019/09/21 全球购物
幼师专业毕业生自荐信
2013/09/29 职场文书
动物学专业毕业生求职信
2013/10/11 职场文书
中专毕业生求职简历的自我评价
2013/10/21 职场文书
运动会通讯稿400字
2014/01/28 职场文书
《在家里》教后反思
2014/03/01 职场文书
车辆工程专业求职信
2014/04/28 职场文书
2014国庆节主题活动方案:快乐的国庆节
2014/09/16 职场文书
个人先进事迹总结
2015/02/26 职场文书
2015年司机年终工作总结
2015/05/14 职场文书
Mysql效率优化定位较低sql的两种方式
2021/05/26 MySQL
python中opencv实现图片文本倾斜校正
2021/06/11 Python
vue 把二维或多维数组转一维数组
2022/04/24 Vue.js