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

2024-07-16 20:44 由二价亚铁发表于 #前端开发

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