拿起Typescript做一個輪子(三)

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的基礎功能已經實現完了,但目前我們還只實現了正常情況的邏輯,異常情況還沒有做處理,那接下就開始對異常情況的處理。

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章