场景:

  点击导出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. python computer info look

    计算机信息查看-. import platform import platform def TestPlatform(): print("---------SYSTEM INFO------ ...

  2. python3.7环境下创建app,运行Django1.11版本项目报错SyntaxError: Generator expression must be parenthesized

    咳咳!!! 今天用命令行创建django项目中的app应用,出现了这样一个错误 这个错误在python3.6版本下安装运行django 1.11版本正常运行,但python3.7版本下运行django ...

  3. Python 并发网络库

    Python 并发网络库 Tornado VS Gevent VS Asyncio Tornado:并发网络库,同时也是一个 web 微框架 Gevent:绿色线程(greenlet)实现并发,猴子补 ...

  4. leecode刷题(29)-- 二叉树的中序遍历

    leecode刷题(29)-- 二叉树的中序遍历 二叉树的中序遍历 给定一个二叉树,返回它的中序 遍历. 示例: 输入: [1,null,2,3] 1 \ 2 / 3 输出: [1,3,2] 思路 跟 ...

  5. springMvc接受单个文件,多个文件,多组文件

    web端 <form id="iconForm" enctype="multipart/form-data"></form> JS:通过 ...

  6. 优秀java博客

    https://www.jianshu.com/p/efb58b7115bf?utm_source=tuicool https://www.nowcoder.com/discuss/110317 ht ...

  7. css复杂动画(animation属性)

    1.声明:@keyframes name{   }: 2.涉及到的属性 animation-name:动画名称 animation-duration:单次动画总时长 animation-timing- ...

  8. sqlalchemy.exc.InternalError: (pymysql.err.InternalError) (1366, "Incorrect string value: '\\xE6\\xB1\\x89\\xE8\\xAF\\xAD...' for column 'className' at row 1") [SQL: INSERT INTO classmessage (`classId

    sqlalchemy.exc.InternalError: (pymysql.err.InternalError) (1366, "Incorrect string value: '\\xE ...

  9. Hyperledger Fabric(3)通道与组织

    1,通道的结构 通道是Fabric中非常重要的概念(类似微信群?),它实质是由排序节点划分和管理的私有原子广播通道,目的是对通道的信息进行隔离,使得通道外的实体无法访问通道内的信息,从而实现交易的隐私 ...

  10. multipart/form-data请求与文件上传的细节

    <!DOCTYPE html><html><head lang="en">  <meta charset="UTF-8" ...