Url處理
需求分析
- 把params參數拼接到url上,參數值支持對對象、數組、Date、特殊字符串的處理,丟棄url中的哈希標記,保留url中已存在的參數
我們在src下新建helpers文件夾作爲我們之後存放公共輔助函數的地方,在該文件夾下新建url.ts和util.ts文件,url.ts編寫對url進行處理的相關邏輯,util.ts編寫對數據類型進行判斷的相關邏輯。
因爲在處理url時需要對日期和對象類型進行特殊的處理,所以我們在util.ts裏編寫兩個判斷日期和對象的方法
然後在encodeurl時需要對特殊字符再轉義回來
處理url的邏輯
然後我們把url處理的邏輯應用到請求當中
Data處理
在helpers下新建個data.ts文件,存放我們處理data的邏輯
Header處理
需求分析
- 支持在發送請求時可以設置headers屬性
- 並且當傳入data爲普通對象時,headers如果沒有配置Content-Type屬性,需要自動設置請求header的Content-Type字段爲:application/json;charset=utf-8
在helpers文件夾下新建headers.ts文件,在這裏實現headers處理的邏輯
然後在processConfig方面裏使用,注意這裏對headers的處理要在data之前,因爲transformRequestData方法會把data轉成JSON字符串,那麼我們的processHeaders方法就不能判斷data爲對象了
然後在xhr方法中設置headers
獲取響應數據
需求分析
- 支持Promise鏈式調用
- 處理返回的數據res,該對象包括服務端返回的數據data、HTTP狀態碼status、狀態消息statusText、響應頭headers、請求配置對象config以及請求的XMLHttpRequest對象實例request
我們先來定義接口類型
接下來讓我改造xhr方法
然後改造axios方法
至此我們axios的基礎功能已經實現完了,但目前我們還只實現了正常情況的邏輯,異常情況還沒有做處理,那接下就開始對異常情況的處理。