動態

詳情 返回 返回

[axios] 實現頁面級批量取消請求 - 動態 詳情

在請求發送階段(未取得返回結果時),前端(瀏覽器)取消請求,捕獲該狀態,並做異常攔截處理。

思路:
1、記錄每個請求的cancelToken。
2、在頁面路由更新時(從頁面A進入頁面B時)取消A頁面未完成的請求。
3、把"取消請求"的異常狀態做一個特殊的異常標記。
4、全局請求攔截器對這種特殊的異常標記做靜默處理。

代碼實現:
1、全局的請求實例攔截器中,增加配置,通過interceptors.request記錄每一個請求的cancelToken。且需要通過 window.axiosPromiseArr 將這些cancelToken在全局暴露出來。
image.png

2、全局的請求實例攔截器中,通過interceptors.response將"取消請求"的狀態做一個特殊標記,方便後期統一靜默處理。
image.png

3、通過vue路由守衞,在路由變更時(即 進入新頁面的時候) 批量取消上一個頁面的未完成請求。
執行 cancel方法,並清除記錄的cancelToken。
image.png

(下面的步驟是非必須項)
4、修改自定義的全局請求攔截器,對"取消請求"做靜默處理。
image.png

後續還可以在路由守衞中增加白名單,用於處理如keepAlive這種不需要取消請求的頁面。

結束。

同步更新到自己的語雀
https://www.yuque.com/dirackeeko/blog/mmhzhdo9fic6pg3e

user avatar linlinma 頭像 judei 頭像 fsjohnhuang 頭像 beiniaonanyou 頭像 aion_6356676d25766 頭像 luxigaola 頭像 geelinklivevideostack 頭像 chongdongdedaxiongmao_kxfei 頭像 zhangfisher 頭像 wanshangbuxuchi 頭像 yourena_c 頭像 xc_xiang 頭像
點贊 19 用戶, 點贊了這篇動態!
點贊

Add a new 評論

Some HTML is okay.