js需要同时发起百条接口请求怎么办？--通过Promise实现分批处理接口请求
如何通过 Promise 实现百条接口请求？
实际项目中遇到需要发起上百条Promise接口请求怎么办？
前言
- 不知你项目中有没有遇到过这样的情况，反正我的实际工作项目中真的遇到了这种玩意，一个接口获取一份列表，列表中的每一项都有一个属性需要通过另一个请求来逐一赋值，然后就有了这份封装
- 真的是很多功能都是被逼出来的
- 这份功能中要提醒一下：批量请求最关键的除了分批功能之外，适当得取消任务和继续任务也很重要，比如用户到了这个页面后，正在发起百条数据请求，但是这些批量请求还没完全执行完，用户离开了这个页面，此时就需要取消剩下正在发起的请求了，而且如果你像我的遇到的项目一样，页面还会被缓存，那么为了避免用户回到这个页面，所有请求又重新发起一遍的话，就需要实现继续任务的功能，其实这个继续任务比断点续传简单多了，就是过滤到那些已经赋值的数据项就行了
- 如果看我啰啰嗦嗦一堆烂东西没看明白的话，就直接看下面的源码吧
源码在此！
【注】：这里的 httpRequest 请根据自己项目而定，比如我的项目是uniapp，里面的http请求是 uni.request，若你的项目是 axios 或者 ajax，那就根据它们来对 BatchHttp 中的某些部分进行相应的修改
比如：其中的 cancelAll() 函数，若你的 http 取消请求的方式不同，那么这里取消请求的功能就需要相应的修改，若你使用的是 fetch 请求，那除了修改 cancelAll 功能之外，singleRequest 中收集请求任务的方式也要修改，因为 fetch 是不可取消的，需要借助 AbortController 来实现取消请求的功能，
提示一下，不管你用的是什么请求框架，你都可以自己二次封装一个 request.js，功能就仿照 axios 这种，返回的对象中包含一个 abort() 函数即可，那么这份 BatchHttp 也就能适用啦
简单案例测试 -- batch-promise-test.html
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head> <body> </body>
<script> /**
* 批量请求封装
*/
class BatchHttp { /**
* 构造函数
* */
constructor() {
} /**
* 单个数据项请求
* @private
* @param {Object} reqOptions - 请求配置
* @param {Object} item - 数据项
* @returns {Promise} 请求Promise
*/
#singleRequest(item) {
return new Promise((resolve, _reject) => {
// 模拟异步请求
console.log(`发起模拟异步请求 padding...: 【${item}】`)
setTimeout(() => {
console.log(`模拟异步请求 success -- 【 ${item}】`)
resolve()
}, 200 + Math.random() * 800)
})
} #chunk(array, size) {
const chunks = []
let index = 0 while (index < array.length) {
chunks.push(array.slice(index, size + index))
index += size
} return chunks
} /**
* 批量请求控制
* @private
* @async
* @returns {Promise}
*/
async #batchRequest() {
const promiseArray = []
let data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 91, 92, 93, 94, 95, 96, 97, 98, 99, 100] data.forEach((item, index) => {
// 原来的错误逻辑（原来的逻辑，导致所有的 Promise 回调函数都会被直接执行，那么就只有对 response 进行分批的功能了）
// const requestPromise = this.#singleRequest(item)
// promiseArray.push(requestPromise) // -- 修改为：
promiseArray.push(index)
}) const promiseChunks = this.#chunk(promiseArray, 10) // 切分成 n 个请求为一组 let groupIndex = 1
for (let ckg of promiseChunks) {
// -- 修改后新增逻辑（在发起一组请求时，收集该组对应的 Promiise 成员）
const ck = ckg.map(idx => this.#singleRequest(data[idx]))
// 发起一组请求
const ckRess = await Promise.all(ck) // 控制并发数
console.log(`------ 第${groupIndex}组分批发起完毕 --------`)
groupIndex += 1
}
} /**
* 执行批量请求操作
*/
exec(options) {
this.#batchRequest(options)
}
} const batchHttp = new BatchHttp()
setTimeout(() => {
batchHttp.exec()
}, 2000)
</script> </html>
BatchHttp.js
// 注：这里的 httpRequest 请根据自己项目而定，比如我的项目是uniapp，里面的http请求是 uni.request，若你的项目是 axios 或者 ajax，那就根据它们来对 BatchHttp 中的某些部分
import httpRequest from './httpRequest.js' /**
* 批量请求封装
*/
export class BatchHttp { /**
* 构造函数
* @param {Object} http - http请求对象（该http请求拦截器里切勿带有任何有关ui的功能，比如加载对话框、弹窗提示框之类）,用于发起请求，该http请求对象必须满足：返回一个包含取消请求函数的对象，因为在 this.cancelAll() 函数中会使用到
* @param {string} [passFlagProp=null] - 用于识别是否忽略某些数据项的字段名（借此可实现“继续上一次完成的批量请求”）；如：passFlagProp='url' 时，在执行 exec 时，会过滤掉 items['url'] 不为空的数据，借此可以实现“继续上一次完成的批量请求”，避免每次都重复所有请求
*/
constructor(http=httpRequest, passFlagProp=null) {
/** @private @type {Object[]} 请求任务数组 */
this.resTasks = []
/** @private @type {Object} uni.request对象 */
this.http = http
/** @private @type {boolean} 取消请求标志 */
this.canceled = false
/** @private @type {string|null} 识别跳过数据的属性 */
this.passFlagProp = passFlagProp
} /**
* 将数组拆分成多个 size 长度的小数组
* 常用于批量处理控制并发等场景
* @param {Array} array - 需要拆分的数组
* @param {number} size - 每个小数组的长度
* @returns {Array} - 拆分后的小数组组成的二维数组
*/
#chunk(array, size) {
const chunks = []
let index = 0 while(index < array.length) {
chunks.push(array.slice(index, size + index))
index += size;
} return chunks
} /**
* 单个数据项请求
* @private
* @param {Object} reqOptions - 请求配置
* @param {Object} item - 数据项
* @returns {Promise} 请求Promise
*/
#singleRequest(reqOptions, item) {
return new Promise((resolve, _reject) => {
const task = this.http({
url: reqOptions.url,
method: reqOptions.method || 'GET',
data: reqOptions.data,
success: res => {
resolve({sourceItem:item, res})
}
})
this.resTasks.push(task)
})
} /**
* 批量请求控制
* @private
* @async
* @param {Object} options - 函数参数项
* @param {Array} options.items - 数据项数组
* @param {Object} options.reqOptions - 请求配置
* @param {number} [options.concurrentNum=10] - 并发数
* @param {Function} [options.chunkCallback] - 分块回调
* @returns {Promise}
*/
async #batchRequest({items, reqOptions, concurrentNum = 10, chunkCallback=(ress)=>{}}) {
const promiseArray = []
let data = []
const passFlagProp = this.passFlagProp
if(!passFlagProp) {
data = items
} else {
// 若设置独立 passFlagProp 值，则筛选出对应属性值为空的数据（避免每次都重复请求所有数据，实现“继续未完成的批量请求任务”）
data = items.filter(d => !Object.hasOwnProperty.call(d, passFlagProp) || !d[passFlagProp])
}
// --
if(data.length === 0) return data.forEach((item,index) => {
// 原来的错误逻辑（原来的逻辑，导致所有的 Promise 回调函数都会被直接执行，那么就只有对 response 进行分批的功能了）
// const requestPromise = this.#singleRequest(reqOptions, item)
// promiseArray.push(requestPromise)
// -- 修改为：这里暂时只记录下想对应的 data 的数组索引，以便分组用，当然这部分有关分组代码还可以进行精简，比如直接使用 data.map进行收集等方式，但是为了与之前错误逻辑形成对比，这篇文章里还是这样写比较完整
promiseArray.push(index)
}) const promiseChunks = this.#chunk(promiseArray, concurrentNum) // 切分成 n 个请求为一组 for (let ckg of promiseChunks) {
// -- 修改后新增逻辑（在发起一组请求时，收集该组对应的 Promiise 成员）
const ck = ckg.map(idx => this.#singleRequest(data[idx]))
// 若当前处于取消请求状态，则直接跳出
if(this.canceled) break
// 发起一组请求
const ckRess = await Promise.all(ck) // 控制并发数
chunkCallback(ckRess) // 每完成组请求，都进行回调
}
} /**
* 设置用于识别忽略数据项的字段名
* （借此参数可实现“继续上一次完成的批量请求”）；
* 如：passFlagProp='url' 时，在执行 exec 时，会过滤掉 items['url'] 不为空的数据，借此可以实现“继续上一次完成的批量请求”，避免每次都重复所有请求
* @param {string} val
*/
setPassFlagProp(val) {
this.passFlagProp = val
} /**
* 执行批量请求操作
* @param {Object} options - 函数参数项
* @param {Array} options.items - 数据项数组
* @param {Object} options.reqOptions - 请求配置
* @param {number} [options.concurrentNum=10] - 并发数
* @param {Function} [options.chunkCallback] - 分块回调
*/
exec(options) {
this.canceled = false
this.#batchRequest(options)
} /**
* 取消所有请求任务
*/
cancelAll() {
this.canceled = true
for(const task of this.resTasks) {
task.abort()
}
this.resTasks = []
}
}
调用案例在此！
由于我的项目是uni-app这种，方便起见，我就直接贴上在 uni-app 的页面 vue 组件中的使用案例
案例代码仅展示关键部分，所以比较粗糙，看懂参考即可
<template>
<view v-for="item of list" :key="item.key">
<image :src="item.url"></image>
</view>
</template>
<script>
import { BatchHttp } from '@/utils/BatchHttp.js' export default {
data() {
return {
isLoaded: false,
batchHttpInstance: null,
list:[]
}
},
onLoad(options) {
this.queryList()
},
onShow() {
// 第一次进页面时，onLoad 和 onShow 都会执行，onLoad 中 getList 已调用 batchQueryUrl，这里仅对缓存页面后再次进入该页面有效
if(this.isLoaded) {
// 为了实现继续请求上一次可能未完成的批量请求，再次进入该页面时，会检查是否存在未完成的任务，若存在则继续发起批量请求
this.batchQueryUrl(this.dataList)
}
this.isLoaded = true
},
onHide() {
// 页面隐藏时，会直接取消所有批量请求任务，避免占用���源（下次进入该页面会检查未完成的批量请求任务并执行继续功能）
this.cancelBatchQueryUrl()
},
onUnload() {
// 页面销毁时，直接取消批量请求任务
this.cancelBatchQueryUrl()
},
onBackPress() {
// 路由返回时，直接取消批量请求任务（虽然路由返回也会执行onHide事件，但是无所胃都写上，会判断当前有没有任务的）
this.cancelBatchQueryUrl()
},
methods: {
async queryList() {
// 接口不方法直接贴的，这里是模拟的列表接口
const res = await mockHttpRequest()
this.list = res.data // 发起批量请求
// 用 nextTick 也行，只要确保批量任务在列表dom已挂载完成之后执行即可
setTimeout(()=>{this.batchQueryUrl(resData)},0)
},
/**
* 批量处理图片url的接口请求
* @param {*} data
*/
batchQueryUrl(items) {
let batchHttpInstance = this.batchHttpInstance
// 判定当前是否有正在执行的批量请求任务，有则直接全部取消即可
if(!!batchHttpInstance) {
batchHttpInstance.cancelAll()
this.batchHttpInstance = null
batchHttpInstance = null
}
// 实例化对象
batchHttpInstance = new BatchHttp()
// 设置过滤数据的属性名（用于实现继续任务功能）
batchHttpInstance.setPassFlagProp('url') // 实现回到该缓存页面是能够继续批量任务的关键一步 <-----
const reqOptions = { url: '/api/product/url' }
batchHttpInstance.exec({items, reqOptions, chunkCallback:(ress)=>{
let newDataList = this.dataList
for(const r of ress) {
newDataList = newDataList.map(d => d.feId === r['sourceItem'].feId ? {...d,url:r['res'].msg} : d)
} this.dataList = newDataList
}}) this.batchHttpInstance = batchHttpInstance
},
/**
* 取消批量请求
*/
cancelBatchQueryUrl() {
if(!!this.batchHttpInstance) {
this.batchHttpInstance.cancelAll()
this.batchHttpInstance = null
}
},
}
}
</script>
js需要同时发起百条接口请求怎么办？--通过Promise实现分批处理接口请求的更多相关文章
- 【轮询】【ajax】【js】【spring boot】ajax超时请求：前端轮询处理超时请求解决方案 + spring boot服务设置接口超时时间的设置
场景描述: ajax设置timeout在本机测试有效,但是在生产环境等外网环境无效的问题 1.ajax的timeout属性设置 前端请求超时事件[网络连接不稳定时候,就无效了] var data = ...
- flask中使用ajax 处理前端请求，每隔一段时间请求不通的接口，结果展示同一页面
需求: flask中使用ajax 处理前端请求,每隔一段时间请求不通的接口,结果展示同一页面 用到 setTimeout方法,setTimeout(function(){},1000):setTime ...
- 本页面用来演示如何通过JS SDK，创建完整的QQ登录流程，并调用openapi接口
QQ登录将用户信息存储在cookie中,命名为__qc__k ,请不要占用 __qc__k : 1) :: 在页面顶部引入JS SDK库: 将“js?”后面的appid参数(示例代码中的:100229 ...
- 【python接口自动化】- 使用requests库发送http请求
前言:什么是Requests ?Requests 是⽤Python语⾔编写,基于urllib,采⽤Apache2 Licensed开源协议的 HTTP 库.它⽐ urllib 更加⽅便,可以节约我们⼤ ...
- Oracle 史上最全近百条Oracle DBA日常维护SQL脚本指令
史上最全近百条Oracle DBA日常维护SQL脚本指令 https://mp.weixin.qq.com/s?__biz=MjM5MDAxOTk2MQ==&mid=2650281305&am ...
- js 文件上传进度条
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- JS实现动画的四条优化方法
JS实现动画的四条优化方法 1)如果使用的是setTimeout实现的轮询动画,在每一次执行方法之前需要把前面的设置的定时器清除掉 2)为了防止全局变量的污染,我们把定时器的返回值赋值给当前操作元素的 ...
- js中ajax连接服务器open函数的另外两个默认参数get请求和默认异步（open的post方式send函数带参数）（post请求和get请求区别：get：快、简单 post：安全，量大，不缓存）（服务器同步和异步区别：同步：等待服务器响应当中浏览器不能做别的事情）（ajax和jquery一起用的）
js中ajax连接服务器open函数的另外两个默认参数get请求和默认异步(open的post方式send函数带参数)(post请求和get请求区别:get:快.简单 post:安全,量大,不缓存)( ...
- JS框架_(JQbar.js)柱状图动态百分比进度条特效
百度云盘 传送门 密码:q6rt 柱状图动态百分比进度条效果 <html> <head> <title>jqbar.js柱状图动态百分比进度条特效</titl ...
- springboot restful接口 如何接受前端的PUT和DELETE请求
最近项目组有人问我,"springboot怎么接受不到前端提交的PUT和DELETE请求?" 于是有了这篇文章,本篇文章主要解决两个问题: js好像只能提交GET.POST请求耶? ...
随机推荐
- uniapp android app 铃声静音，真正的免打扰
需要加入这个权限: <uses-permission android:name=\"android.permission.ACCESS_NOTIFICATION_POLICY\&quo ...
- 解决idea 控制台输出乱码问题：
解决idea 控制台输出乱码问题[IntelliJ IDEA 2022.1.3 (Ultimate Edition)]: 将两个地方文件编码设置成GBK 参考文档:https://blog.c ...
- 鸿蒙HarmonyOS实战-Web组件（页面跳转和浏览记录）
前言 页面跳转是指在浏览器中从当前页面跳转到另一个页面的操作.可以通过点击链接.输入网址.提交表单等方式实现页面跳转. 浏览记录是指记录用户在浏览器中浏览过的页面的历史记录.当用户跳转到一个新页面时, ...
- leetcode阶段总结
1.目前已经刷了大概200道题目 主要使用的语言是python,刷完之后,发现盲写部分语法依然记不住: 以后刷算法保持一个原则,一定使用不提示代码的工具,纯文本编写,尽量不debug 2.后续尽量使用 ...
- react兄弟之间通信
写入组件 import React, { Component } from 'react'//下面二个就是兄弟关系的组件 import Cmp1 from '../Child/Cmp1' import ...
- react类组件
使用ES6语法的class创建的组件(有状态组件) 类名称必须要大写字母开头 类组件要继承React.Component父类,从而可以使用父类中提供的方法或者属性 类组件必须提供 render 方法, ...
- LeetCode 682. Baseball Game 棒球比赛(C++/Java)
题目: You're now a baseball game point recorder. Given a list of strings, each string can be one of th ...
- 项目管理--PMBOK 读书笔记（13）【项目相关方管理】
1.相关方分矩阵 工具与技术 核查表 又叫检查表,计数表,收集属性数据,解决问题. 焦点小组&访谈: 特点:慢,焦点小组是一对多,访谈时多对多. 抽样统计&控制图: 控制图反应 ...
- 工程数学 实验5-MATLAB最优化工具箱的使用
(1)线性规划应用案例的求解 1.基本要求 通过一个农业生产计划优化安排的实例求解,培养学生解决实际线性规划问题的初步能力:熟悉线性规划的建模过程:掌握Matlab优化工具箱中线性规划函数的调用. 2 ...
- .NET8操作Mysql，Pomelo.EntityFrameworkCore.MySql版本目前最高只有7.0解决办法
Pomelo.EntityFrameworkCore.MySql7.0是不支持.NET8的,但现在Pomelo.EntityFrameworkCore.MySql的最新版本只有7.0 因为 Pomel ...