JavaScript使用Promise實現(xiàn)分批處理接口請求
前言
不知你項目中有沒有遇到過這樣的情況,反正我的實際工作項目中真的遇到了這種玩意,一個接口獲取一份列表,列表中的每一項都有一個屬性需要通過另一個請求來逐一賦值,然后就有了這份封裝
真的是很多功能都是被逼出來的
這份功能中要提醒一下:批量請求最關(guān)鍵的除了分批功能之外,適當?shù)萌∠蝿?wù)和繼續(xù)任務(wù)也很重要,比如用戶到了這個頁面后,正在發(fā)起百條數(shù)據(jù)請求,但是這些批量請求還沒完全執(zhí)行完,用戶離開了這個頁面,此時就需要取消剩下正在發(fā)起的請求了,而且如果你像我的遇到的項目一樣,頁面還會被緩存,那么為了避免用戶回到這個頁面,所有請求又重新發(fā)起一遍的話,就需要實現(xiàn)繼續(xù)任務(wù)的功能,其實這個繼續(xù)任務(wù)比斷點續(xù)傳簡單多了,就是過濾到那些已經(jīng)賦值的數(shù)據(jù)項就行了
如果看我啰啰嗦嗦一堆爛東西沒看明白的話,就直接看下面的源碼吧
源碼
【注】:這里的 httpRequest 請根據(jù)自己項目而定,比如我的項目是uniapp,里面的http請求是 uni.request,若你的項目是 axios 或者 ajax,那就根據(jù)它們來對 BatchHttp 中的某些部分進行相應(yīng)的修改
比如:其中的 cancelAll() 函數(shù),若你的 http 取消請求的方式不同,那么這里取消請求的功能就需要相應(yīng)的修改,若你使用的是 fetch 請求,那除了修改 cancelAll 功能之外,singleRequest 中收集請求任務(wù)的方式也要修改,因為 fetch 是不可取消的,需要借助 AbortController 來實現(xiàn)取消請求的功能,
提示一下,不管你用的是什么請求框架,你都可以自己二次封裝一個 request.js,功能就仿照 axios 這種,返回的對象中包含一個 abort() 函數(shù)即可,那么這份 BatchHttp 也就能適用啦
BatchHttp.js
// 注:這里的 httpRequest 請根據(jù)自己項目而定,比如我的項目是uniapp,里面的http請求是 uni.request,若你的項目是 axios 或者 ajax,那就根據(jù)它們來對 BatchHttp 中的某些部分
import httpRequest from './httpRequest.js'
/**
* 批量請求封裝
*/
export class BatchHttp {
/**
* 構(gòu)造函數(shù)
* @param {Object} http - http請求對象(該http請求攔截器里切勿帶有任何有關(guān)ui的功能,比如加載對話框、彈窗提示框之類),用于發(fā)起請求,該http請求對象必須滿足:返回一個包含取消請求函數(shù)的對象,因為在 this.cancelAll() 函數(shù)中會使用到
* @param {string} [passFlagProp=null] - 用于識別是否忽略某些數(shù)據(jù)項的字段名(借此可實現(xiàn)“繼續(xù)上一次完成的批量請求”);如:passFlagProp='url' 時,在執(zhí)行 exec 時,會過濾掉 items['url'] 不為空的數(shù)據(jù),借此可以實現(xiàn)“繼續(xù)上一次完成的批量請求”,避免每次都重復(fù)所有請求
*/
constructor(http=httpRequest, passFlagProp=null) {
/** @private @type {Object[]} 請求任務(wù)數(shù)組 */
this.resTasks = []
/** @private @type {Object} uni.request對象 */
this.http = http
/** @private @type {boolean} 取消請求標志 */
this.canceled = false
/** @private @type {string|null} 識別跳過數(shù)據(jù)的屬性 */
this.passFlagProp = passFlagProp
}
/**
* 將數(shù)組拆分成多個 size 長度的小數(shù)組
* 常用于批量處理控制并發(fā)等場景
* @param {Array} array - 需要拆分的數(shù)組
* @param {number} size - 每個小數(shù)組的長度
* @returns {Array} - 拆分后的小數(shù)組組成的二維數(shù)組
*/
#chunk(array, size) {
const chunks = []
let index = 0
while(index < array.length) {
chunks.push(array.slice(index, size + index))
index += size;
}
return chunks
}
/**
* 單個數(shù)據(jù)項請求
* @private
* @param {Object} reqOptions - 請求配置
* @param {Object} item - 數(shù)據(jù)項
* @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 - 函數(shù)參數(shù)項
* @param {Array} options.items - 數(shù)據(jù)項數(shù)組
* @param {Object} options.reqOptions - 請求配置
* @param {number} [options.concurrentNum=10] - 并發(fā)數(shù)
* @param {Function} [options.chunkCallback] - 分塊回調(diào)
* @returns {Promise}
*/
async #batchRequest({items, reqOptions, concurrentNum = 10, chunkCallback=(ress)=>{}}) {
const promiseArray = []
let data = []
const passFlagProp = this.passFlagProp
if(!passFlagProp) {
data = items
} else {
// 若設(shè)置獨立 passFlagProp 值,則篩選出對應(yīng)屬性值為空的數(shù)據(jù)(避免每次都重復(fù)請求所有數(shù)據(jù),實現(xiàn)“繼續(xù)未完成的批量請求任務(wù)”)
data = items.filter(d => !Object.hasOwnProperty.call(d, passFlagProp) || !d[passFlagProp])
}
// --
if(data.length === 0) return
data.forEach(item => {
const requestPromise = this.#singleRequest(reqOptions, item)
promiseArray.push(requestPromise)
})
const promiseChunks = this.#chunk(promiseArray, concurrentNum) // 切分成 n 個請求為一組
for (let ck of promiseChunks) {
// 若當前處于取消請求狀態(tài),則直接跳出
if(this.canceled) break
// 發(fā)起一組請求
const ckRess = await Promise.all(ck) // 控制并發(fā)數(shù)
chunkCallback(ckRess) // 每完成組請求,都進行回調(diào)
}
}
/**
* 設(shè)置用于識別忽略數(shù)據(jù)項的字段名
* (借此參數(shù)可實現(xiàn)“繼續(xù)上一次完成的批量請求”);
* 如:passFlagProp='url' 時,在執(zhí)行 exec 時,會過濾掉 items['url'] 不為空的數(shù)據(jù),借此可以實現(xiàn)“繼續(xù)上一次完成的批量請求”,避免每次都重復(fù)所有請求
* @param {string} val
*/
setPassFlagProp(val) {
this.passFlagProp = val
}
/**
* 執(zhí)行批量請求操作
* @param {Object} options - 函數(shù)參數(shù)項
* @param {Array} options.items - 數(shù)據(jù)項數(shù)組
* @param {Object} options.reqOptions - 請求配置
* @param {number} [options.concurrentNum=10] - 并發(fā)數(shù)
* @param {Function} [options.chunkCallback] - 分塊回調(diào)
*/
exec(options) {
this.canceled = false
this.#batchRequest(options)
}
/**
* 取消所有請求任務(wù)
*/
cancelAll() {
this.canceled = true
for(const task of this.resTasks) {
task.abort()
}
this.resTasks = []
}
}
到此這篇關(guān)于JavaScript使用Promise實現(xiàn)分批處理接口請求的文章就介紹到這了,更多相關(guān)JavaScript Promise分批處理請求內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Typescript中infer關(guān)鍵字的使用小結(jié)
infer是TypeScript中條件類型的一個關(guān)鍵字,主要用于在條件類型中進行類型推斷,下面就來詳細的介紹一下Typescript infer關(guān)鍵字的使用,感興趣的可以了解一下2026-01-01
谷歌showModalDialog()方法不兼容出現(xiàn)對話窗口的解決辦法
這篇文章給大家介紹了谷歌showModalDialog()方法不兼容出現(xiàn)對話窗口的解決辦法,解決辦法非常好,感興趣的朋友可以參考下2016-02-02
js實現(xiàn)的仿Photoshop鼠標滾輪控制輸入框取值(修正兼容Chrome)
一直很想做這個效果,原理是監(jiān)聽鼠標滾輪事件;可將此效果繼續(xù)發(fā)散到其他應(yīng)用上,如圖片縮放,頁面縮放等。2010-02-02

