在 vue-element-admin 中,一個完整的前端 UI 交互到服務端處理流程是這樣的:
- UI 組件交互操作;
- 調用統一管理的 api service 請求函數;
- 使用封裝的 request.js 發送請求;
- 獲取服務端返回;
- 更新 data;
從上面的流程可以看出,為了方便管理維護,統一的請求處理都放在 @/api 文件夾中,並且一般按照 model 緯度進行拆分文件,如:
api/
login.js
article.js
remoteSearch.js
...
其中,@/utils/request.js 是基於 axios 的封裝,便於統一處理 POST,GET 等請求參數,請求頭,以及錯誤提示信息等。具體可以參看 request.js。 它封裝了全局 request攔截器、response攔截器、統一的錯誤處理、統一做了超時處理、baseURL設置等。