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 相关文章推荐
Mootools 1.2教程 输入过滤第二部分(字符串)
Sep 15 Javascript
javascript椭圆旋转相册实现代码
Jan 16 Javascript
自己写了一个展开和收起的多更能型的js效果
Mar 05 Javascript
jQuery操作input值的各种方法总结
Nov 21 Javascript
jQuery内部原理和实现方式浅析
Feb 03 Javascript
浅谈javascript属性onresize
Apr 20 Javascript
js实现div层缓慢收缩与展开的方法
May 11 Javascript
php利用curl获取远程图片实现方法
Oct 26 Javascript
Javascript基础知识盲点总结之函数
May 15 Javascript
Ionic快速安装教程
Jun 03 Javascript
vue实现todolist基本功能以及数据存储功能实例详解
Apr 11 Javascript
JS+CSS3实现的简易钟表效果示例
Apr 13 Javascript
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
joomla内置的表单验证功能使用方法
2010/06/11 PHP
php中CI操作多个数据库的代码
2012/07/05 PHP
php无限分类且支持输出树状图的详细介绍
2013/06/19 PHP
iOS10推送通知开发教程
2016/09/19 PHP
php+mysql查询实现无限下级分类树输出示例
2016/10/03 PHP
Fleaphp常见函数功能与用法示例
2016/11/15 PHP
PHP实现文字写入图片功能
2019/02/18 PHP
laravel 多图上传及图片的存储例子
2019/10/14 PHP
jQuery dialog 异步调用ashx,webservice数据的代码
2010/08/03 Javascript
window.dialogArguments 使用说明
2011/04/11 Javascript
探索angularjs+requirejs全面实现按需加载的套路
2016/02/26 Javascript
通过示例彻底搞懂js闭包
2017/08/10 Javascript
一个简易时钟效果js实现代码
2020/03/25 Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧滑动,右侧不动)
2019/01/23 Javascript
使用kbone解决Vue项目同时支持小程序问题
2019/11/08 Javascript
python基础教程之简单入门说明(变量和控制语言使用方法)
2014/03/25 Python
Python自动登录126邮箱的方法
2015/07/10 Python
使用python采集脚本之家电子书资源并自动下载到本地的实例脚本
2018/10/23 Python
Python爬取数据保存为Json格式的代码示例
2019/04/09 Python
Python Pandas中根据列的值选取多行数据
2019/07/08 Python
使用Python实现 学生学籍管理系统
2019/11/26 Python
基于MSELoss()与CrossEntropyLoss()的区别详解
2020/01/02 Python
基于keras 模型、结构、权重保存的实现
2020/01/24 Python
python自动点赞功能的实现思路
2020/02/26 Python
俄罗斯街头服装品牌:Black Star Wear
2017/03/01 全球购物
UGG美国官网:购买UGG雪地靴、拖鞋和鞋子
2017/12/31 全球购物
华为慧通笔试题
2016/04/22 面试题
为什么会有内存对齐
2016/10/10 面试题
商铺租赁意向书
2014/04/01 职场文书
医疗器械售后服务承诺书
2014/05/21 职场文书
查摆问题自我剖析材料
2014/08/18 职场文书
好人好事演讲稿
2014/09/01 职场文书
工作证明格式及范本
2014/09/12 职场文书
2014年效能监察工作总结
2014/11/21 职场文书
2015秋季幼儿园开学通知
2015/07/16 职场文书
nginx常用命令放入shell脚本详解
2021/03/31 Servers