js需要同时发起百条接口请求怎么办？--通过Promise实现分批处理接口请求

类饲冰 · 2025-6-6 15:50:02

如何通过 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
1. <!DOCTYPE html>
2. <html lang="en">
4. <head>
5. <meta charset="UTF-8">
6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
7. <title>Document</title>
8. </head>
10. <body>
12. </body>
15. </html>
复制代码
BatchHttp.js
1. // 注：这里的 httpRequest 请根据自己项目而定，比如我的项目是uniapp，里面的http请求是 uni.request，若你的项目是 axios 或者 ajax，那就根据它们来对 BatchHttp 中的某些部分
2. import httpRequest from './httpRequest.js'
4. /**
5. * 批量请求封装
6. */
7. export class BatchHttp {
9. /**
10. * 构造函数
11. * @param {Object} http - http请求对象（该http请求拦截器里切勿带有任何有关ui的功能，比如加载对话框、弹窗提示框之类）,用于发起请求，该http请求对象必须满足：返回一个包含取消请求函数的对象，因为在 this.cancelAll() 函数中会使用到
12. * @param {string} [passFlagProp=null] - 用于识别是否忽略某些数据项的字段名（借此可实现“继续上一次完成的批量请求”）；如：passFlagProp='url' 时，在执行 exec 时，会过滤掉 items['url'] 不为空的数据，借此可以实现“继续上一次完成的批量请求”，避免每次都重复所有请求
13. */
14. constructor(http=httpRequest, passFlagProp=null) {
15. /** @private @type {Object[]} 请求任务数组 */
16. this.resTasks = []
17. /** @private @type {Object} uni.request对象 */
18. this.http = http
19. /** @private @type {boolean} 取消请求标志 */
20. this.canceled = false
21. /** @private @type {string|null} 识别跳过数据的属性 */
22. this.passFlagProp = passFlagProp
23. }
26. /**
27. * 将数组拆分成多个 size 长度的小数组
28. * 常用于批量处理控制并发等场景
29. * @param {Array} array - 需要拆分的数组
30. * @param {number} size - 每个小数组的长度
31. * @returns {Array} - 拆分后的小数组组成的二维数组
32. */
33. #chunk(array, size) {
34. const chunks = []
35. let index = 0
37. while(index < array.length) {
38. chunks.push(array.slice(index, size + index))
39. index += size;
40. }
42. return chunks
43. }
45. /**
46. * 单个数据项请求
47. * @private
48. * @param {Object} reqOptions - 请求配置
49. * @param {Object} item - 数据项
50. * @returns {Promise} 请求Promise
51. */
52. #singleRequest(reqOptions, item) {
53. return new Promise((resolve, _reject) => {
54. const task = this.http({
55. url: reqOptions.url,
56. method: reqOptions.method || 'GET',
57. data: reqOptions.data,
58. success: res => {
59. resolve({sourceItem:item, res})
60. }
61. })
62. this.resTasks.push(task)
63. })
64. }
66. /**
67. * 批量请求控制
68. * @private
69. * @async
70. * @param {Object} options - 函数参数项
71. * @param {Array} options.items - 数据项数组
72. * @param {Object} options.reqOptions - 请求配置
73. * @param {number} [options.concurrentNum=10] - 并发数
74. * @param {Function} [options.chunkCallback] - 分块回调
75. * @returns {Promise}
76. */
77. async #batchRequest({items, reqOptions, concurrentNum = 10, chunkCallback=(ress)=>{}}) {
78. const promiseArray = []
79. let data = []
80. const passFlagProp = this.passFlagProp
81. if(!passFlagProp) {
82. data = items
83. } else {
84. // 若设置独立 passFlagProp 值，则筛选出对应属性值为空的数据（避免每次都重复请求所有数据，实现“继续未完成的批量请求任务”）
85. data = items.filter(d => !Object.hasOwnProperty.call(d, passFlagProp) || !d[passFlagProp])
86. }
87. // --
88. if(data.length === 0) return
90. data.forEach((item,index) => {
91. // 原来的错误逻辑（原来的逻辑，导致所有的 Promise 回调函数都会被直接执行，那么就只有对 response 进行分批的功能了）
92. // const requestPromise = this.#singleRequest(reqOptions, item)
93. // promiseArray.push(requestPromise)
94. // -- 修改为：这里暂时只记录下想对应的 data 的数组索引，以便分组用，当然这部分有关分组代码还可以进行精简，比如直接使用 data.map进行收集等方式，但是为了与之前错误逻辑形成对比，这篇文章里还是这样写比较完整
95. promiseArray.push(index)
96. })
98. const promiseChunks = this.#chunk(promiseArray, concurrentNum) // 切分成 n 个请求为一组
100. for (let ckg of promiseChunks) {
101. // -- 修改后新增逻辑（在发起一组请求时，收集该组对应的 Promiise 成员）
102. const ck = ckg.map(idx => this.#singleRequest(data[idx]))
103. // 若当前处于取消请求状态，则直接跳出
104. if(this.canceled) break
105. // 发起一组请求
106. const ckRess = await Promise.all(ck) // 控制并发数
107. chunkCallback(ckRess) // 每完成组请求，都进行回调
108. }
109. }
111. /**
112. * 设置用于识别忽略数据项的字段名
113. * （借此参数可实现“继续上一次完成的批量请求”）；
114. * 如：passFlagProp='url' 时，在执行 exec 时，会过滤掉 items['url'] 不为空的数据，借此可以实现“继续上一次完成的批量请求”，避免每次都重复所有请求
115. * @param {string} val
116. */
117. setPassFlagProp(val) {
118. this.passFlagProp = val
119. }
121. /**
122. * 执行批量请求操作
123. * @param {Object} options - 函数参数项
124. * @param {Array} options.items - 数据项数组
125. * @param {Object} options.reqOptions - 请求配置
126. * @param {number} [options.concurrentNum=10] - 并发数
127. * @param {Function} [options.chunkCallback] - 分块回调
128. */
129. exec(options) {
130. this.canceled = false
131. this.#batchRequest(options)
132. }
134. /**
135. * 取消所有请求任务
136. */
137. cancelAll() {
138. this.canceled = true
139. for(const task of this.resTasks) {
140. task.abort()
141. }
142. this.resTasks = []
143. }
144. }
复制代码

调用案例在此！

由于我的项目是uni-app这种，方便起见，我就直接贴上在 uni-app 的页面 vue 组件中的使用案例
案例代码仅展示关键部分，所以比较粗糙，看懂参考即可
1. <template>
2. <view v-for="item of list" :key="item.key">
3. <image :src="item.url"></image>
4. </view>
5. </template>
复制代码

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

账号		自动登录	找回密码
密码			立即注册

js需要同时发起百条接口请求怎么办？--通过Promise实现分批处理接口请求

相关帖子

签约作者

js需要同时发起百条接口请求怎么办？--通过Promise实现分批处理接口请求

相关帖子

相关推荐

签约作者