场景:

  点击导出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. [Luogu5686] 和积和

    Description 给定两个下标从\(1\)到\(n\)编号的序列 \(a_i,b_i\),定义函数\(S(l,r)(1\le l\le r\le n)\)为: \[\sum_{i=l}^r a_ ...

  2. 动态树(LCT、Top Tree、ETT)

    LCT Upd: 一个细节:假如我们要修改某个节点的数据,那么要先把它makeroot再修改,改完之后pushup. LCT是一种维护森林的数据结构,本质是用Splay维护实链剖分. 实链剖分大概是这 ...

  3. 从入门到自闭之Python软件命名规范

    软件命名规范:分文件存储 当代码存放在一个py文件中时会存在一下缺点: 不便于管理 可读性差 加载速度慢 是Django的雏形 程序员预定俗称的一些东西 启动文件:也叫启动接口,通常文件夹名字使用bi ...

  4. linux端口控制(开放-禁止)

    禁止访问80端口iptables -I INPUT -p tcp --dport 80 -j DROP 允许ip为192.168.1.1的机器访问iptables -I INPUT -p tcp -s ...

  5. js 禁用F12 和右键查看源码

    <script> window.onkeydown = function(e) { if (e.keyCode === 123) { e.preventDefault() } } wind ...

  6. vue--微信支付

    1.当前页面没有注册: 需要登录微信支付商家后台,添加支付路径授权 2.安装 weixin-js-sdk 微信SDK npm install weixin-js-sdk --save 3.引入 imp ...

  7. postMessage解决iframe跨域问题

    转:https://juejin.im/post/5b8359f351882542ba1dcc31 https://juejin.im/post/590c3983ac502e006531df11 ht ...

  8. CDN和浏览器缓存

    1,CDN 旨在解决的最重要的问题是什么,我们称之为网络延迟,通过网络获取资源总是比从本地获取慢,无论服务器是在同一个局域网中还是位于世界的另一个角落,都是如此.这里的速度差异是 IT 行业的一个核心 ...

  9. Ansible安装部署和常用命令,及其主机清单inventory(二)

    1.ansible的安装方式 1.1使用yum源安装 yum install ansible -y 1.2使用rpm包安装 https://dl.fedoraproject.org/pub/epel/ ...

  10. Linux进程管理工具之ps

    1.PS进程管理指令 ps    -aux USER:用户名称 PID:进程号 %CPU:进程占用CPU的百分比 %MEM:进程占用物理内存的百分比 VSZ:进程占用的虚拟内存大小(单位:KB) RS ...