axios多并发请求

场景:
点击导出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多并发请求的更多相关文章
- axios 处理并发请求
//同时发起多个请求时的处理 axios.all([get1(), get2()]) .then(axios.spread(function (res1, res2) { // 只有两个请求都完成才会 ...
- axios的基本用法与并发请求
一.axios的基本用法 <router-link to="" class="a1" @click.native="logins"&g ...
- 用axios.all处理并发请求
如果我们需用在两个接口同时完成后,然后在执行一些逻辑,我们可以使用axios.all处理并发请求,如下所示: function getUserAccount() { return axios.get( ...
- axios 等待同步请求用法及多请求并发
axios等待同步请求 直接上代码 首先在函数中返回一个Promise对象,在调用函数使用同步函数,调用目标函数使用await等待即可 参考http://www.cnblogs.com/cckui/p ...
- vue使用Axios做ajax请求
vue2.0之后,就不再对vue-resource更新,而是推荐使用axios 1. 安装 axios $ npm install axios 或 $ bower install axios 2. 在 ...
- 如何配置IIS处理多并发请求及存在的问题
很多时候多线程能快速高效独立的计算数据,应用比较多. 但今天遇到的多进程下的问题更是让人觉得复杂 多进程下static变量都要失效,就目前的平台和产品static使用是很多的,各种session.ca ...
- 查看 Apache并发请求数及其TCP连接状态
查看 Apache并发请求数及其TCP连接状态 (2011-06-27 15:08:36) 服务器上的一些统计数据: 1)统计80端口连接数 netstat -nat|grep -i "80 ...
- 查看 并发请求数及其TCP连接状态【转】
服务器上的一些统计数据: 1)统计80端口连接数netstat -nat|grep -i "80"|wc -l 2)统计httpd协议连接数ps -ef|grep httpd|wc ...
- IIS处理并发请求时出现的问题及解决
一个ASP.NET项目在部署到生产环境时,当用户并发量达到200左右时,IIS出现了明显的请求排队现象,发送的请求都进入等待,无法及时响 应,系统基本处于不可用状态.因经验不足,花了很多时间精力解决这 ...
随机推荐
- # 「银联初赛第一场」自学图论的码队弟弟(dfs找环+巧解n个二元一次方程)
「银联初赛第一场」自学图论的码队弟弟(dfs找环+巧解n个二元一次方程) 题链 题意:n条边n个节点的连通图,边权为两个节点的权值之和,没有「自环」或「重边」,给出的图中有且只有一个包括奇数个结点的环 ...
- Vue首页加载过慢 解决方案
一.什么导致了首页初步加载过慢:app.js文件体积过大 二.解决方法: 1.Vue-router懒加载 vue-router懒加载可以解决首次加载资源过多导致的速度缓慢问题:vue-router支持 ...
- Codeforces 1194E. Count The Rectangles
传送门 看到 $n<=5000$,直接暴力枚举左右两条竖线 然后考虑怎么计算高度在某个范围内,左端点小于等于某个值,右端点大于等于某个值的横线数量 直接用权值树状数组维护当前高度在某个区间内的横 ...
- vue中添加与删除,关键字搜索
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- nginx redirect ignore port 两层nginx跳转忽略了端口
问题: 两层nginx做代理,第一层:nginx:将9087->代理到80端口,第二层:将80端口->流量打到我们的代码上,结果在代码中拿到的链接不带9087端口,则代码中发生跳转的时候, ...
- Ceph实战入门之安部署篇
最近Ceph官方发布了luminous长久支持版,新版本增加了很多有意思的功能,但是入门还是先从部署安装开始. 环境说明 在Win10下安装VMware® Workstation 12 Pro软件,用 ...
- Zen Cart 常用SQL命令
网店日常维护过程中,难免要跟各种批量操作打交道, 虽然大多数操作可以通过批量上传 (easy populate) 和 快速更新 模块来完成, 但在应用便捷性和一些功能性的调整上, 总有一定的局限性; ...
- kotlin面向对象之接口、代理与委托、单例模式
接口: 对于什么是接口这里就不概述了,跟java中的概念一样,下面直接上代码进行操练: 而男人跟女人的接口当然也是不同的,很显然男人跟女人最大的差别就是拥有"小弟弟"[我黄我暴利] ...
- ORACLE纯SQL实现多行合并一行
项目中遇到一个需求,需要将多行合并为一行.表结构如下:NAME Null Type---------------------- ...
- 关于Mongodb的其他知识
Mongodb支持的数据类型 数据类型 描述 String 字符串.存储数据常用的数据类型.在 MongoDB 中,UTF-8 编码的字符串才是合法的. Integer 整型数值.用于存储数值.根据你 ...