React 請求攔截與接口統一和模擬解決方案

技術概述

什么情況會使用到這個技術

axios 在 React 項目中的請求攔截方案以及接口統一和模擬。

學習該技術的原因

使項目更加高內聚低耦合，更加便於后續的管理。

技術的難點在哪里

需要較多的 React 項目實踐才能總結出來。

技術詳述

流程圖

過程

1. 在 src 文件夾下創建 services 目錄

2. 登錄 RAP2 並注冊一個賬號

3. 設置 RAP2 上的模塊

   

4. 添加模塊下的接口

   

   這里的接口模擬用的是 mock.js

5. 通過模塊設立文件夾

   

6. 在文件里填入相應的接口

   

   判斷是否是 mock ，如果是調用 RAP2 上的模擬接口，否則調用實際后端接口。

7. 在 index.js 下配置請求攔截，並導出其他模塊對應接口

   

8. 之后在需要的地方調用這些接口傳參即可。

技術中遇到的問題和解決過程

無

總結

可以看到， RAP2 上的模塊和文件夾一一對應，保證了無重名性，文件夾內的接口也與 RAP2 上的接口一一對應，保證了無重名性以及一致性，便於后續的開發。使用請求攔截的模式，並在 index.js 中導出，可以保證在導出其他模塊之前，都進行了請求攔截的處理。