在平時的單頁面項目里，大家肯定接觸過axios庫，一個易用、簡潔且高效，使用Promise管理異步，告別傳統callback方式的http庫。

最近有個項目里接口調取的頻率比較高，接口隊列長，然后等待數據的時間就是痛苦的煎熬，特別是一連串有關聯的數據交互，每次打開頁面我都有種欲死的感覺。經過一番深思改造后，除去接口本身的速度，對于頁面的流暢度提高了不少，所以今天就和大家分享一下，怎么封裝二次Axios，取消重復請求和接口緩存。

安裝Axios

npm install axios

Axios基本配置

根目錄下新建axios.config.js文件，先寫入請求攔截器，響應攔截器，其中要注意接口請求失敗的信息處理，根據status判斷是否要進行額外的處理，例如下面例子判斷statue為401則清除token，重新登錄，如果有error.message 就返回錯誤信息代碼100002，用于頁面判斷顯示錯誤信息。

/** axios封裝 請求攔截、響應攔截 */ 取消重復接口

新建一個數組taskList用于存儲接口請求任務隊列，接口請求流程如下圖。例如請求A接口的時候，先判斷A接口是否存在于taskList里，如若存在則axios.CancelToken方法取消前一個A接口，然后往隊列里增加本次A接口，等到請求完成的時候，再將A接口移除taskList，以此類推就完成一個動態任務隊列啦。

/** axios封裝 請求攔截、響應攔截 */ 接口緩存，避免資源過度消耗

對于調用頻率高、數據變化較小的接口，可以根據情況進行適當時間的緩存，第二次調取的時候直接取緩存加載，既可以優化接口任務隊列，更能節省時間和資源。

新建一個Map集合cachMap用于存放接口緩存集合，接口進行流程有所改變，如下圖。請求A接口的時候，先判斷是否有同樣的請求存在于隊列中，如有則取消，不同點在于，如若接口沒有取消則判斷接口則判斷是否有緩存且處于有效期內，判斷成功則返回緩存，反則隊列新增接口，請求完成的時候將結果緩存，請求A移除隊列。

/** axios封裝 請求攔截、響應攔截 */

接口請求的時候，如果需要緩存需要在header里增加expirationTime(ms),代碼如下。

return

接口請求的時候回重定義exprianTime字段為空。

最后我還考慮過，如接口緩存時間較長，可以考慮將apiCach里的cachMap緩存于localstorage,然后定期更新,這樣每次打開頁面或者刷新的時候，也可以有效緩解首頁加載速度，但是目前項目利用率不是很高，所以就沒使用。

當然如果大家還有什么好的優化可以留言告訴我哦。

總結

以上是生活随笔為你收集整理的单页面axios_Axios封装之取消重复请求和接口缓存的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。