在最近開發(fā)小程序的過程中，遇到一個需求，就是請求的時候header需要帶上accessToken, accessToken是通過登陸接口返回的參數(shù)，可能會出現(xiàn)過期的情況，則需要重新登陸，所以每次加載小程序都會進(jìn)行一次本地儲存的accessToken校驗，但是再小程序的運(yùn)行機(jī)制下，app的onLaunch，加載pages的onLoad會并發(fā)執(zhí)行，在弱網(wǎng)的情況下，并發(fā)可能導(dǎo)致accessToken還沒校驗完，page的請求函數(shù)就開始執(zhí)行了，這樣很容易會導(dǎo)致接口異常，本來的解決辦法是在每個page頁面調(diào)接口之前都await一下app.js里面checkAccessToken的方法，但是這樣寫起來不太友好

解決思路：

在request的基礎(chǔ)上封裝多一層鎖，當(dāng)accessToekn校驗完成之前，其他進(jìn)來的請求都進(jìn)行等待，不進(jìn)行請求，等待校驗完成，才開始其他請求

原理分析

對原有的request請求做一次封裝

利用promise的特性以及js對象存儲在內(nèi)存的特性, 配合async/await，讓其他請求等待關(guān)鍵請求完成再開始請求，從而實現(xiàn)請求鎖

首先等待關(guān)鍵請求完成了，再通過返回進(jìn)入判斷是否經(jīng)過需要

代碼分析

首先模擬一次請求

// 模擬一次請求發(fā)起 const mockRequest = (name, time = Math.random() * 1000) =>new Promise(reslove => {console.log(`${name}---------------run`);setTimeout(() => {reslove(`${name}---------------done`);}, time);});

定義請求鎖

請求鎖要管理兩種狀態(tài)，一種是關(guān)鍵請求進(jìn)行是狀態(tài)，一種是當(dāng)關(guān)鍵請求失敗了之后，需要等待輔助操作完成的狀態(tài)

const lock = { wait: null, runing: null };

在request的基礎(chǔ)上加一層封裝

參數(shù)設(shè)置兩種，withOutLock用于某些不需要等待的請求直接跳過邏輯，lockOthers用于鎖住在關(guān)鍵請求之后進(jìn)來的請求

關(guān)鍵請求進(jìn)來直接執(zhí)行，lock.runing直接賦予關(guān)鍵請求的pending狀態(tài)，當(dāng)其他請求進(jìn)來的時候，都直接等待，不進(jìn)行請求發(fā)起，等主要請求進(jìn)來完成之后，其他才開始執(zhí)行

// 封裝模擬request const request = async (name,opts = { withOutLock: false, lockOthers: false, hasErr: false } ) => {// 不需要等待的請求直接執(zhí)行if (opts.withOutLock) {const res = await mockRequest(`${name} - withOutLock`);console.log(res);return;}// 關(guān)鍵請求未執(zhí)行完成 其他請求進(jìn)入等待狀態(tài)if (lock.runing) {console.log(`${name}---------------wating...`);await lock.runing;}// 鎖住之后進(jìn)來的請求if (opts.lockOthers) {lock.runing = mockRequest(name, 4000);let res = await lock.runing;// 清空進(jìn)行鎖lock.runing = null;// 模擬關(guān)鍵請求失敗的 需要再次等待其他操作的情況 例如重新登陸等if (opts.hasErr) {lock.wait = mockRequest("關(guān)鍵請求異常處理", 4000);} else {console.log(res);return;}}// 等待模擬關(guān)鍵請求失敗的處理if (lock.wait) {console.log(`等待關(guān)鍵請求異常處理中...`);await lock.wait;// 清空等待鎖lock.wait = null;console.log(`關(guān)鍵請求異常處理完成`);}const res = await mockRequest(name);console.log(res);return; };

模擬運(yùn)行效果

// 并發(fā)請求模擬 const mockConcurrent = () => {for (let i = 0; i < 5; i ) {setTimeout(() => {request(`并發(fā)請求${i}`, { withOutLock: i === 0 });}, Math.random() * 100);} };request("關(guān)鍵請求 - 其他需要等待完成才能進(jìn)行", {lockOthers: true,hasErr: false });mockConcurrent();

運(yùn)行時效果

最后

經(jīng)過同事的指點，未來還打算探究一下請求池，做請求上下文之類的實現(xiàn)

demo代碼: 具體例子代碼demo參考

純技術(shù)探索，坑點未知，歡迎指出錯誤以及不足的地方

總結(jié)

以上是生活随笔為你收集整理的[探索] 利用promise做一个请求锁的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。