场景:

  点击导出Excel按钮实现,姓名列表中前五个的所有的文章数据发送给后端,姓名列表中点击过的数据会被存放到localStorage中;

思路:

  点击导出按钮,把前五个数据逐个和localStorage中的数据对比,找到前五个中没有发送请求的数据,放到数组中,然后对这些没有请求的数据进行一次多并发请求,把多并发请求到的数据存储到浏览器中,再统一按照前五名的姓名顺序到localStorage中拉取数据,提交后台;

问题:

  如何一次发送多个请求?

解决办法:

  方法一:

  

getNameData(name,affiliation){
return this.$axios.get("/api/academic/paper_search", {
params: {
name: name,
affiliation: affiliation
}
})
},
sendAllAxios(){
let arr = []
this.getFiveNameData.forEach(item => {
if(!JSON.parse(localStorage.getItem("baseInfo"))[item.name]){
arr.push( this.getNameData(item.name,item.affiliation))
}
});
return new Promise((resolve,reject)=>{
if(arr.length){
this.$axios.all(arr).then((res)=>{
res.forEach(item=>{
if(item.status == 200){
this.baseInfo[item.config.params.name] = item.data
}
})
localStorage.setItem("baseInfo",JSON.stringify(this.baseInfo))
resolve()
}).catch(e=>{console.log(e)})
}else{
let sendData = {}
this.getFiveNameData.forEach(item => {
sendData[item.name] = JSON.parse(localStorage.getItem("baseInfo"))[item.name]
})
resolve(sendData)
}
})
},

方法二:

  Promise.all(arr).then(res=>{ })

踩坑:

this.$axios.all(arr).then((res)=>{})中then的第一个参数是一个数组,表示所有请求的信息;

this.$axios.all(arr).then(this.$axios.spread(function (acct, perms){ }) 这种方式是请求返回的数据形式的数据逐个展开,acct表示请求返回后数组中的第一条数据,perms表示第二条数据,

注意:

  spread是在确定几个请求一起发的情况下用

												

axios多并发请求的更多相关文章

  1. axios 处理并发请求

    //同时发起多个请求时的处理 axios.all([get1(), get2()]) .then(axios.spread(function (res1, res2) { // 只有两个请求都完成才会 ...

  2. axios的基本用法与并发请求

    一.axios的基本用法 <router-link to="" class="a1" @click.native="logins"&g ...

  3. 用axios.all处理并发请求

    如果我们需用在两个接口同时完成后,然后在执行一些逻辑,我们可以使用axios.all处理并发请求,如下所示: function getUserAccount() { return axios.get( ...

  4. axios 等待同步请求用法及多请求并发

    axios等待同步请求 直接上代码 首先在函数中返回一个Promise对象,在调用函数使用同步函数,调用目标函数使用await等待即可 参考http://www.cnblogs.com/cckui/p ...

  5. vue使用Axios做ajax请求

    vue2.0之后,就不再对vue-resource更新,而是推荐使用axios 1. 安装 axios $ npm install axios 或 $ bower install axios 2. 在 ...

  6. 如何配置IIS处理多并发请求及存在的问题

    很多时候多线程能快速高效独立的计算数据,应用比较多. 但今天遇到的多进程下的问题更是让人觉得复杂 多进程下static变量都要失效,就目前的平台和产品static使用是很多的,各种session.ca ...

  7. 查看 Apache并发请求数及其TCP连接状态

    查看 Apache并发请求数及其TCP连接状态 (2011-06-27 15:08:36) 服务器上的一些统计数据: 1)统计80端口连接数 netstat -nat|grep -i "80 ...

  8. 查看 并发请求数及其TCP连接状态【转】

    服务器上的一些统计数据: 1)统计80端口连接数netstat -nat|grep -i "80"|wc -l 2)统计httpd协议连接数ps -ef|grep httpd|wc ...

  9. IIS处理并发请求时出现的问题及解决

    一个ASP.NET项目在部署到生产环境时,当用户并发量达到200左右时,IIS出现了明显的请求排队现象,发送的请求都进入等待,无法及时响 应,系统基本处于不可用状态.因经验不足,花了很多时间精力解决这 ...

随机推荐

  1. JMX jconsole 的使用

    JMX 1. JMX简单介绍 JMX的全称为Java Management Extensions. 顾名思义,是管理Java的一种扩展.这种机制可以方便的管理正在运行中的Java程序.常用于管理线程, ...

  2. 搞懂Redis复制原理

    前言 与大多数db一样,Redis也提供了复制机制,以满足故障恢复和负载均衡等需求.复制也是Redis高可用的基础,哨兵和集群都是建立在复制基础上实现高可用的.复制不仅提高了整个系统的容错能力,还可以 ...

  3. SQL学习(三)之子句和函数

    函数 COUNT()/计数.MIN()/最小值.MAX()/最大值.AVG()/平均值.SUM()/和 子句 子句是语句的一部分包括WHERE.GROUP.ORDER.LIMIT WHERE:条件 G ...

  4. mongo分布式锁Java实现

    一.分布式锁使用场景: 代码部署在多台服务器上,即分布式部署. 多个进程同步访问一个共享资源. 二.需要的技术: 数据库:mongo java:mongo操作插件类 MongoTemplate(mav ...

  5. 多线程编程-- part5.1 互斥锁之公平锁-获取锁

    基本概念 1.AQS:AbstractQueuedSynchronizer类 AQS是java中管理“锁”的抽象类,锁的许多公共方法都是在这个类中实现.AQS是独占锁(例如,ReentrantLock ...

  6. linux下ifconfig只剩下lo的解决方法

    运行以下命令,删除旧的网络配置,重新让networkmanager自动配置即可 sudo service network-manager stop sudo rm /var/lib/NetworkMa ...

  7. 谷歌对Intel 10nm进度不满

    Intel 在 10nm 处理器上的节奏可谓是“龟速”,一拖三年,且目前大规模发货的 10nm Ice Lake 处理器仅仅是移动平台低电压,桌面要到明年. 表面波澜不惊,实际上却暗流涌动. 首先是 ...

  8. Raspbian 2019-06-20 发布

    有关新Raspbian的信息是作为今天博客文章的一部分提供的,该帖子宣布了全新的Raspberry Pi 4: 为了支持Raspberry Pi 4,我们发布了一个全新的操作系统,基于即将发布的Deb ...

  9. QT5.9 QString和字符串转换的乱码问题

    QString转字符串的乱码: 先在头文件加入: //解决QString到char的中文乱码 #if _MSC_VER >= 1600 #pragma execution_character_s ...

  10. table 边框问题

    对table设置css样式边框,分为几种情况:1.只对table设置边框2.对td设置边框3.对table和td技巧性设置表格边框4.对table和td设置背景,实现完美表格边框 以下DIVCSS5对 ...