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 相关文章推荐
Javascript注入技巧
Jun 22 Javascript
HTML中事件触发列表与解说
Jul 09 Javascript
用 Javascript 验证表单(form)中多选框(checkbox)值
Sep 08 Javascript
javascript读取Xml文件做一个二级联动菜单示例
Mar 17 Javascript
js的toUpperCase方法用法实例
Jan 27 Javascript
AngularJs concepts详解及示例代码
Sep 01 Javascript
angularJS模态框$modal实例代码
May 27 Javascript
Angular实现搜索框及价格上下限功能
Jan 19 Javascript
React中使用async validator进行表单验证的实例代码
Aug 17 Javascript
在vue项目中集成graphql(vue-ApolloClient)
Sep 08 Javascript
JavaScript 斐波那契数列 倒序输出 输出100以内的质数代码实例
Sep 11 Javascript
webpack proxy 使用(代理的使用)
Jan 10 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
Windows PHP5和Apache的安装与配置
2009/06/08 PHP
php保存二进制原始数据为图片的程序代码
2014/10/14 PHP
thinkphp微信开发(消息加密解密)
2015/12/02 PHP
PHP数组游标实现对数组的各种操作详解
2016/01/26 PHP
PHP读取CSV大文件导入数据库的实例
2017/07/24 PHP
Laravel中日期时间处理包Carbon的简单使用
2017/09/21 PHP
Expandable "Detail" Table Rows
2007/08/29 Javascript
javascript 使td内容不换行不撑开
2012/11/29 Javascript
如何在父窗口中得知window.open()出的子窗口关闭事件
2013/10/15 Javascript
nodejs中简单实现Javascript Promise机制的实例
2014/12/06 NodeJs
JS数组合并push与concat区别分析
2015/12/17 Javascript
WordPress 单页面上一页下一页的实现方法【附代码】
2016/03/10 Javascript
JavaScript实现垂直向上无缝滚动特效代码
2016/11/23 Javascript
JQuery和HTML5 Canvas实现弹幕效果
2017/01/04 Javascript
jQuery EasyUI之验证框validatebox实例详解
2017/04/10 jQuery
使用Vue完成一个简单的todolist的方法
2017/12/01 Javascript
vue中利用Promise封装jsonp并调取数据
2019/06/18 Javascript
记一次用ts+vuecli4重构项目的实现
2020/05/21 Javascript
[01:50:49]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster BO3 第三场 1月24日
2021/03/11 DOTA
Python笔记(叁)继续学习
2012/10/24 Python
Python基础练习之用户登录实现代码分享
2017/11/08 Python
详解python metaclass(元类)
2020/08/13 Python
python遍历路径破解表单的示例
2020/11/21 Python
python读取图片颜色值并生成excel像素画的方法实例
2021/02/19 Python
韩国三星旗下的一家超市连锁店:Home Plus
2016/07/30 全球购物
澳大利亚最好的厨具店:Kitchen Warehouse
2018/03/13 全球购物
采购主管工作职责
2013/12/12 职场文书
汽车维修专业个人求职信范文
2014/01/01 职场文书
顶撞老师检讨书
2014/02/07 职场文书
优秀毕业生推荐信范文
2014/03/07 职场文书
法人委托书范本
2014/04/04 职场文书
奥运会口号
2014/06/13 职场文书
新农村建设汇报材料
2014/08/15 职场文书
班子查摆四风个人对照检查材料思想汇报
2014/10/04 职场文书
置业顾问岗位职责
2015/02/09 职场文书
详解Python函数print用法
2021/06/18 Python