场景:

  点击导出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并发编程-进程间通信-Queue队列使用-生产者消费者模型-线程理论-创建及对象属性方法-线程互斥锁-守护线程-02

    目录 进程补充 进程通信前言 Queue队列的基本使用 通过Queue队列实现进程间通信(IPC机制) 生产者消费者模型 以做包子买包子为例实现当包子卖完了停止消费行为 线程 什么是线程 为什么要有线 ...

  2. C# 面向对象3 静态和非静态的区别

    静态和非静态的区别 1.在非静态类中,既可以有实例成员(非静态成员),也可以有静态成员. 2.在调用实例成员的时候,需要使用对象名.实例成员; 在调用静态成员的时候,需要使用类名.静态成员名; 总结: ...

  3. lambda中FirstOrDefault和First

    First()表示取集合中的第一个元素,如果集合为空,则抛异常. FirstOrDefault()表示取集合的第一个元素. 如果集合为空,且集合元素是引用类型,则返回null. 如果集合为空,且集合元 ...

  4. dedecms 调用全部导航+二级导航

    {dede:channelartlist row=5 typeid='top'} <li><a class="hide" href="{dede:fie ...

  5. centso 7 Keepalived 配置脚本

    #!/bin/bash #This is keepalived bashshell. #MASTER/BACKUP yum install -y openssl openssl-devel keepa ...

  6. VSCode配合chrome浏览器调试cocos2d js项目

    1.准备阶段 具备调试功能的VSCode(我的是在win10上,版本是1.17.1) 在VSCode里下载安装Debugger for Chrome扩展插件. 2.具体操作 创建一个cocosjs工程 ...

  7. Java I/O(一)流和文件类File的概述、FileInputStream和FileInputStream

    一.流概述 & InputStream.OutputStream 流包括输入流和输出流,即I/O(Input和Output),具体结构如下: I/O类都被放在java.io包中,所有的输入流类 ...

  8. No module named 'winrandom'。

    问题:在windows的python3使用PyCrypto出现ImportError: No module named 'winrandom'错误处理:修改python3安装目录下的  lib/Cry ...

  9. 使用nfs制作动态分配存储卷

    参考文献:https://yq.aliyun.com/articles/613036 相对于静态存储, 动态存储的优势: ● 管理员无需预先创建大量的PV作为存储资源; ● 静态存储需要用户申请PVC ...

  10. 使用xpath提取页面所有a标签的href属性值

    # -*- coding: utf-8 -*- #1.选取节点 #获取所有的div元素 //div #/代表获取根节点的直接子元素 #获取所有带有id属性的div //div[@id] #2.谓词(索 ...