如何通过 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>