经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » JS/JS库/框架 » Omi » 查看文章
js需要同时发起百条接口请求怎么办？--通过Promise实现分批处理接口请求
来源：cnblogs　　作者：二价亚铁　　时间：2024/7/17 10:58:41　　对本文有异议

如何通过 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>
    13.   <script>
    15.     /**
    16.      * 批量请求封装
    17.      */
    18.     class BatchHttp {
    20.   	/** 
    21.   	 * 构造函数 
    22.   	 * */
    23.   	constructor() {
    24.   	}
    26.   	/** 
    27.   	 * 单个数据项请求 
    28.   	 * @private
    29.   	 * @param {Object} reqOptions - 请求配置
    30.   	 * @param {Object} item - 数据项 
    31.   	 * @returns {Promise} 请求Promise
    32.   	*/
    33.   	#singleRequest(item) {
    34.   	  return new Promise((resolve, _reject) => {
    35.   		// 模拟异步请求
    36.   		console.log(`发起模拟异步请求 padding...: 【${item}】`)
    37.   		setTimeout(() => {
    38.   		  console.log(`模拟异步请求 success -- 【 ${item}】`)
    39.   		  resolve()
    40.   		}, 200 + Math.random() * 800)
    41.   	  })
    42.   	}
    44.   	#chunk(array, size) {
    45.   	  const chunks = []
    46.   	  let index = 0
    48.   	  while (index < array.length) {
    49.   		chunks.push(array.slice(index, size + index))
    50.   		index += size
    51.   	  }
    53.   	  return chunks
    54.   	}
    56.   	/**
    57.   	 * 批量请求控制
    58.   	 * @private
    59.   	 * @async
    60.   	 * @returns {Promise}
    61.   	*/
    62.   	async #batchRequest() {
    63.   	  const promiseArray = []
    64.   	  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]
    66.   	  data.forEach((item, index) => {
    67.   		// 原来的错误逻辑（原来的逻辑，导致所有的 Promise 回调函数都会被直接执行，那么就只有对 response 进行分批的功能了）
    68.   		// const requestPromise = this.#singleRequest(item)
    69.   		// promiseArray.push(requestPromise)
    71.   		// -- 修改为：
    72.   		promiseArray.push(index)
    73.   	  })
    75.   	  const promiseChunks = this.#chunk(promiseArray, 10) // 切分成 n 个请求为一组
    77.   	  let groupIndex = 1
    78.   	  for (let ckg of promiseChunks) {
    79.   		// -- 修改后新增逻辑（在发起一组请求时，收集该组对应的 Promiise 成员）
    80.   		const ck = ckg.map(idx => this.#singleRequest(data[idx]))
    81.   		// 发起一组请求
    82.   		const ckRess = await Promise.all(ck) // 控制并发数
    83.   		console.log(`------ 第${groupIndex}组分批发起完毕 --------`)
    84.   		groupIndex += 1
    85.   	  }
    86.   	}
    88.   	/**
    89.   	 * 执行批量请求操作
    90.   	 */
    91.   	exec(options) {
    92.   	  this.#batchRequest(options)
    93.   	}
    94.     }
    96.     const batchHttp = new BatchHttp()
    97.     setTimeout(() => {
    98.   	batchHttp.exec()
    99.     }, 2000)
    100.   </script>
    102.   </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>
    6.   	<script>
    7.   	import { BatchHttp } from '@/utils/BatchHttp.js'
    9.   	export default {
    10.   		data() {
    11.   			return {
    12.   				isLoaded: false,
    13.   				batchHttpInstance: null,
    14.   				list:[]
    15.   			}
    16.   		},
    17.   		onLoad(options) {
    18.   			this.queryList()
    19.   		},
    20.   		onShow() {
    21.   			// 第一次进页面时，onLoad 和 onShow 都会执行，onLoad 中 getList 已调用 batchQueryUrl，这里仅对缓存页面后再次进入该页面有效
    22.   			if(this.isLoaded) {
    23.   				// 为了实现继续请求上一次可能未完成的批量请求，再次进入该页面时，会检查是否存在未完成的任务，若存在则继续发起批量请求
    24.   				this.batchQueryUrl(this.dataList)
    25.   			}
    26.   			this.isLoaded = true
    27.   		},
    28.   		onHide() {
    29.   			// 页面隐藏时，会直接取消所有批量请求任务，避免占用???源（下次进入该页面会检查未完成的批量请求任务并执行继续功能）
    30.   			this.cancelBatchQueryUrl()
    31.   		},
    32.   		onUnload() {
    33.   			// 页面销毁时，直接取消批量请求任务
    34.   			this.cancelBatchQueryUrl()
    35.   		},
    36.   		onBackPress() {
    37.   			// 路由返回时，直接取消批量请求任务（虽然路由返回也会执行onHide事件，但是无所胃都写上，会判断当前有没有任务的）
    38.   			this.cancelBatchQueryUrl()
    39.   		},
    40.   		methods: {
    41.   			async queryList() {
    42.   				// 接口不方法直接贴的，这里是模拟的列表接口
    43.   				const res = await mockHttpRequest()
    44.   				this.list = res.data
    46.   				// 发起批量请求
    47.   				// 用 nextTick 也行，只要确保批量任务在列表dom已挂载完成之后执行即可
    48.   				setTimeout(()=>{this.batchQueryUrl(resData)},0)
    49.   			},
    50.   			/**
    51.   			 * 批量处理图片url的接口请求
    52.   			 * @param {*} data 
    53.   			 */
    54.   			 batchQueryUrl(items) {
    55.   				let batchHttpInstance = this.batchHttpInstance
    56.   				// 判定当前是否有正在执行的批量请求任务，有则直接全部取消即可
    57.   				if(!!batchHttpInstance) {
    58.   					batchHttpInstance.cancelAll()
    59.   					this.batchHttpInstance = null
    60.   					batchHttpInstance = null
    61.   				}
    62.   				// 实例化对象
    63.   				batchHttpInstance = new BatchHttp()
    64.   				// 设置过滤数据的属性名（用于实现继续任务功能）
    65.   				batchHttpInstance.setPassFlagProp('url') // 实现回到该缓存页面是能够继续批量任务的关键一步 <-----
    66.   				const reqOptions = { url: '/api/product/url' }
    67.   				batchHttpInstance.exec({items, reqOptions, chunkCallback:(ress)=>{
    68.   					let newDataList = this.dataList
    69.   					for(const r of ress) {
    70.   						newDataList = newDataList.map(d => d.feId === r['sourceItem'].feId ? {...d,url:r['res'].msg} : d)
    71.   					}
    73.   					this.dataList = newDataList
    74.   				}})
    76.   				this.batchHttpInstance = batchHttpInstance
    77.   			},
    78.   			/**
    79.   			 * 取消批量请求
    80.   			 */
    81.   			cancelBatchQueryUrl() {
    82.   				if(!!this.batchHttpInstance) {
    83.   					this.batchHttpInstance.cancelAll()
    84.   					this.batchHttpInstance = null
    85.   				}
    86.   			},
    87.   		}
    88.   	}
    89.   	</script>

原文链接：https://www.cnblogs.com/xw-01/p/18306078

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

Omi热门文章

  • 实现和CSS一样的easing动画？直接看Mozilla、Chromium源码!
  • Promise改写获取萤石云直播地址接口示例
  • 微信小程序网络层封装的实现（promise, 登录锁）
  • 详解ES6 Promise对象then方法链式调用
  • IntelliJ IDEA同步代码时版本冲突而产生出的incoming partial文件问题的解决办法
  • Netty分布式Future与Promise执行回调相关逻辑剖析
  • js Promise并发控制数量的方法
  • JavaScript中的Promise详解
  • 详解JavaScript如何实现一个简易的Promise对象
  • 详解将微信小程序接口Promise化并使用async函数

    • Omi推荐文章

  • js需要同时发起百条接口请求怎么办？--通过Promise实现分批处理接口请求
  • 开源一款功能强大的 .NET 消息队列通讯模型框架 Maomi.MQ
  • Chromium GPU资源共享
  • Chromium 通过IDL方式添加扩展API
  • 实现和CSS一样的easing动画？直接看Mozilla、Chromium源码!
  • ES6 中 Promise对象使用学习
  • 详解JavaScript如何实现一个简易的Promise对象
  • JavaScript详解使用Promise处理回调地狱与async?await修饰符
  • Netty分布式Future与Promise执行回调相关逻辑剖析
  • 一个萝卜一个坑#M坑—Polynomial、Polyder

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号