經(jīng)過這段時間vue項目的積累, 總結(jié)一下自己對axios請求的封裝, 我們可以通過以下點來拆分:
1.請求的url
2.請求的方式
3.請求的參數(shù)
4.請求攔截器
5.響應(yīng)攔截器
6.調(diào)用方式
請求的url
假設(shè)url為http://10.0..:8080/test/task/32682?appCode=001&userId=test, 我們可以把url拆分為
- 基礎(chǔ)路徑baseURL=http://10.0..:8080
我們可以把baseURL的值存到全局配置config文件中, 然后通過webpack
ProvidePlugin添加到全局變量config.baseURL
獲取baseURL
WeChat44c47fe85238878d09bcbd8412a4d197.png
-
業(yè)務(wù)路徑path=/test/task/{taskId}
對于業(yè)務(wù)路徑我們可以定義一個path.js文件, 統(tǒng)一管理這些路徑,如下圖:
WechatIMG433.jpeg另外 path中{taskId}, 這里給大家解釋下, 后臺按照restful api設(shè)計的時
候, 會把針對某個實體的操作, 此實體的id拼接在path上, 所以我們需要動態(tài)的把
{taskId}替換為32682, 代碼見下個步驟 -
url請求參數(shù)appCode=001&userId=test
最后我們需要把請求的參數(shù)拼接到url上, 這里強調(diào)下把參數(shù)拼接到url上, 并不僅
僅是get請求方式, 而是get請求方式只能放到url上, 一般來說其他請求方式在url
請求上拼接參數(shù), 這類參數(shù)基本上是一些業(yè)務(wù)系統(tǒng)每個接口都需要的一些信息,
我們通過util中封裝的方法統(tǒng)一處理url如下:
屏幕快照 2019-10-24 上午10.36.59.png -
請求方式
axios為我們提供了get/delete/head/post/put/patch等
屏幕快照 2019-10-24 上午11.09.37.png
-
請求攔截器
我們在發(fā)出請求時, 可以對請求進行一些處理, 比如說我們移動端的token添加
request header, 以及在發(fā)出請求時的出錯
屏幕快照 2019-10-24 上午10.49.34.png -
響應(yīng)攔截器
我們在收到響應(yīng)時, 可以統(tǒng)一對響應(yīng)成功和失敗,進行一些處理, 不同系統(tǒng)后臺處
理可能會不一樣, 比如id不能為空, 在不同系統(tǒng)可能有如下2種:- 返回200狀態(tài)碼, 在responseData中, 再通過某個字段來區(qū)分成功或失敗, 失敗
的話, 再專門進行失敗處理 -
返回400狀態(tài)碼, 400狀態(tài)碼一般代表, 客戶端傳遞參數(shù)有問題, 導致后臺出錯,
這時, 后臺一般會自定義一些異常類去捕獲, 異常類一般有2個屬性, code和
message, 后臺定義的code在接下來我們前端處理codeMessage對象中, 要保持
一致, 而codeMessage中的message不一定需要與后臺異常類中message保持一
致, 因為后臺的message一般是英文提示, 此提示直接展示給用戶不夠友好, 所以
我們前端可以翻譯或者自定義message
屏幕快照 2019-10-24 上午11.00.25.png
- 返回200狀態(tài)碼, 在responseData中, 再通過某個字段來區(qū)分成功或失敗, 失敗
-
axios請求構(gòu)造
屏幕快照 2019-10-24 上午11.12.32.png 業(yè)務(wù)模塊具體調(diào)用請求
我們可以進行一下抽象, control -> service -> http請求
- control我們可以理解為業(yè)務(wù)組件調(diào)用層, 構(gòu)造請求參數(shù)
- service我們可以理解為業(yè)務(wù)模塊服務(wù)層, 我們在這里可以對請求參數(shù)處理, 以及url處理, 此處我們可以按照業(yè)務(wù)場景分模塊
比如: moduleA下的請求集中一起, moduleB下的請求集中一起 -
http請求即為我們導出的axios對象, 此對象提供了我們進行http請求的基礎(chǔ)實現(xiàn)
屏幕快照 2019-10-24 上午11.24.31.png
屏幕快照 2019-10-24 上午11.28.06.png
至此, 完成對axios請求的封裝, 歡迎提問, 一起進步!
