JavaScript使用promise處理多重復請求
一、為什麼要寫這個文章?
處理重復請求的文章想必大傢也看過瞭很多,大多數都是分為在response返回之前發現重復請求就return掉的和使用節流/防抖來間接規避用戶頻繁操作兩種版本的。最近在使用的過程的中,發現這兩個版本在某些場景下還是有些局限性。
二、問題場景
如圖,我這個h5的頁面,頂部和底部都要顯示這個名片組件。這些名片的信息是通過一個接口來獲取的,當這個組件在當前頁面被初始化時,就會發生兩次重復的請求。
這時會面臨幾個抉擇:
1. 不對重復請求做任何處理。
- 缺點1:造成不必要的資源浪費,增大服務器的壓力
- 缺點2:http請求在瀏覽器中是有並發數限制的,如果頁面首屏的請求較多且沒有分層級加載的話,很容易造成請求阻塞,影響用戶第一時間看到主要內容
2. 對重復請求直接return掉。這也是部分文章的做法,不過這種做法有種局限性,就是直接認定後面的重復請求均為無效請求。
- 無效請求場景:用戶點擊瞭某個按鈕進行查詢或保存,在請求結果返回之前,後面點擊基本都算是無效請求,這種請求就是應該被阻止的。當然,也可以通過在按鈕上添加節流/防抖來規避這個問題
- 為何不適用於目前場景:這兩個名片的組件都是需要數據來渲染的,如果第二次重復的請求被return瞭,其中一個組件的名片就會沒有數據。
3. 把請求從組件中抽離出來放到父級的業務頁面中,再以props的方式傳進組件。
- 好處:隻需要請求一次,兩個組件就可以共享一份數據。
- 局限性:隻適用於單個業務頁面用到的情況。事實上這個組件很多個業務頁面在用,即使把請求的函數抽成公用的api,也是要在每個業務頁面初始化的時候調用一次,然後再以props的方式傳進組件。
三、解決方式
核心思想
- 初始化一個handleList的數組
- 在請求發送前,根據入參是否相同判斷是否為重復請求
- 非重復請求:把改請求的參數和請求返回的Promise添加至數組中
- 重復請求:使用find查找直接返回對應的Promise
- 請求完成後把handleList中之前添加的請求信息移除。
這個方案是什麼都可以使用的,無論是使用axios、jq、fetch、小程序request。這裡就寫實現的原理,使用時直接把對應的代碼放到對應的請求時機即可。
代碼示例
let handleList = [] // 請求列表 /** * 模擬請求 * @author waldon * @date 2020/6/9 */ const httpRequest = () => { return new Promise((resolve) => { setTimeout(() => { resolve(`請求成功,時間戳為:${new Date().getTime()}`) }, 1000) }) } /** * 請求的相關處理 * @author waldon * @date 2020/6/9 * @param {String} url - * @param {Object} requestObj - 請求參數 * @returns {Promise} - 請求的promise */ function requestTest(url, requestObj = {}) { // 因為入參一般不會涉及到復雜類型,JSON.stringify進行序列化對比其實夠用瞭 // 有個局限性就是入參的順序改變瞭就會影響判斷,不過這種特殊的改變一般在重復請求中不會出現 // 實在是有這種需求的,換成其他遞歸對比的api,lodash也有類似的api const sameHandle = handleList.find( (item) => item.url === url && JSON.stringify(item.requestObj) === JSON.stringify(requestObj) ) if (sameHandle) { // 遇到相同請求直接返回之前請求的promise console.log(`存在重復請求,直接返回`) return sameHandle.handle } const handle = new Promise((resolve, reject) => { httpRequest() .then((res) => { resolve(res) }) .catch((err) => { reject(err) }) .finally(() => { // 無論請求結果如果,都需要把對應的請求移除掉 handleList = handleList.filter( (item) => item.url !== url && JSON.stringify(item.requestObj) !== JSON.stringify(requestObj) ) }) }) handleList.push({ url, requestObj, handle }) return handle } // *******************************我是華麗的分割線 開始使用******************************* const params = { name: 'waldon' } requestTest('/ajax/sameUrl', params).then((res) => { console.log(`首次請求結果`, res) console.log(`handleList:`, handleList) }) requestTest('/ajax/sameUrl', params).then((res) => { console.log(`重復請求結果`, res) console.log(`handleList:`, handleList) // 請求列表中始終隻有一個請求 setTimeout(() => { console.log(`請求完成後的handleList:`, handleList) // 請求完成handleList對應的請求會被清除 }, 100) }) setTimeout(() => { // 特意延遲500ms請求,因為我們設置瞭接口1s才返回,所以應該得到一樣的結果 requestTest('/ajax/sameUrl', params).then((res) => { console.log(`重復請求結果`, res) console.log(`handleList:`, handleList) }) }, 500)
輸出結果
存在重復請求,直接返回
存在重復請求,直接返回
首次請求結果 請求成功,時間戳為:1621650375540
handleList: [
{
url: ‘/ajax/sameUrl’,
requestObj: { name: ‘waldon’ },
handle: Promise { ‘請求成功,時間戳為:1621650375540’ }
}
]
重復請求結果 請求成功,時間戳為:1621650375540
handleList: [
{
url: ‘/ajax/sameUrl’,
requestObj: { name: ‘waldon’ },
handle: Promise { ‘請求成功,時間戳為:1621650375540’ }
}
]
重復請求結果 請求成功,時間戳為:1621650375540
handleList: [
{
url: ‘/ajax/sameUrl’,
requestObj: { name: ‘waldon’ },
handle: Promise { ‘請求成功,時間戳為:1621650375540’ }
}
]
請求完成後的handleList: []
代碼地址 codepen
https://codepen.io/waldonUB/pen/ZEeeONM
註意的點
- 不要對response中的數據進行增刪操作。因為重復請求返回Promise中的對象引用地址都是同一個,改動瞭就會造成數據污染。特殊情況時可以淺拷貝響應結果再處理,或者是增加對應的斷言。
- 處理重復的請求時,最好在log中提示一下,同時在組件中註釋好原因和使用場景,避免他人誤改
- 做好極端情況下,請求失敗的處理,設置有效時間置空和移除請求信息,避免因為閉包堆積過多無用的請求信息造成內存泄漏。
到此這篇關於JavaScript使用promise處理多重復請求的文章就介紹到這瞭,更多相關js promise多重復請求內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- 徹底搞懂 javascript的Promise
- 一篇文章讓你搞清楚JavaScript事件循環
- 淺析Promise的介紹及基本用法
- 面試手寫實現Promise.all
- vue中Promise的使用方法詳情