js需要同时发起百条接口请求怎么办？--通过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 = 0while (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 = 1for (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

调用案例在此！

由于我的项目是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 = nullbatchHttpInstance = null}// 实例化对象batchHttpInstance = new BatchHttp()// 设置过滤数据的属性名（用于实现继续任务功能）batchHttpInstance.setPassFlagProp('url') // 实现回到该缓存页面是能够继续批量任务的关键一步 <-----const reqOptions = { url: '/api/product/url' }batchHttpInstance.exec({items, reqOptions, chunkCallback:(ress)=>{let newDataList = this.dataListfor(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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/724433.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！