TypeScript 作為 JavaScript 語言的超集,它為 JavaScript 添加了可選擇的類型標(biāo)注付鹿,大大增強了代碼的可讀性和可維護性澜汤。同時,它提供最新和不斷發(fā)展的 JavaScript 特性舵匾,能讓我們建立更健壯的組件俊抵。
本篇文章主要介紹基于TypeScript從零重構(gòu)axios
- 處理請求 url 參數(shù)
axios({
method: 'get',
url: '/base/get',
params: {
a: 1,
b: 2
}
})
首先我們來分析一下怎么將多種類型的params拼接在url中。
(1)參數(shù)值為數(shù)組
最終請求的url
是 /base/get?foo[]=bar&foo[]=baz
(2)參數(shù)值為對象
最終請求的 url 是 /base/get?foo=%7B%22bar%22:%22baz%22%7D
纽匙,foo 后面拼接的是 {"bar":"baz"} encode
后的結(jié)果务蝠。
(3)參數(shù)值為 Date 類型
最終請求的 url
是 /base/get?date=2019-04-01T05:55:39.030Z
拍谐,date
后面拼接的是 date.toISOString()
的結(jié)果烛缔。
(4)特殊字符支持
對于字符 @
馏段、:
、$
践瓷、,
院喜、、[
晕翠、]
喷舀,我們是允許出現(xiàn)在 url
中的,不希望被 encode淋肾。
最終請求的 url
是 /base/get?foo=@:$+
硫麻,注意,我們會把空格 轉(zhuǎn)換成 +
樊卓。
(5)空值忽略
對于值為 null
或者 undefined
的屬性拿愧,我們是不會添加到 url 參數(shù)中的。
最終請求的 url
是 /base/get?foo=bar
碌尔。
(6)丟棄 url 中的哈希標(biāo)記
最終請求的 url
是 /base/get?foo=bar
(7)保留 url 中已存在的參數(shù)
最終請求的 url
是 /base/get?foo=bar&bar=baz
(8)函數(shù)實現(xiàn)
helpers/url.ts:
import { isDate, isObject } from './util'
function encode (val: string): string {
return encodeURIComponent(val)
.replace(/%40/g, '@')
.replace(/%3A/gi, ':')
.replace(/%24/g, '$')
.replace(/%2C/gi, ',')
.replace(/%20/g, '+')
.replace(/%5B/gi, '[')
.replace(/%5D/gi, ']')
}
export function bulidURL (url: string, params?: any) {
if (!params) {
return url
}
const parts: string[] = []
Object.keys(params).forEach((key) => {
let val = params[key]
if (val === null || typeof val === 'undefined') {
return
}
let values: string[]
if (Array.isArray(val)) {
values = val
key += '[]'
} else {
values = [val]
}
values.forEach((val) => {
if (isDate(val)) {
val = val.toISOString()
} else if (isObject(val)) {
val = JSON.stringify(val)
}
parts.push(`${encode(key)}=${encode(val)}`)
})
})
let serializedParams = parts.join('&')
if (serializedParams) {
const markIndex = url.indexOf('#')
if (markIndex !== -1) {
url = url.slice(0, markIndex)
}
url += (url.indexOf('?') === -1 ? '?' : '&') + serializedParams
}
return url
}
helpers/util.ts:
const toString = Object.prototype.toString
export function isDate (val: any): val is Date {
return toString.call(val) === '[object Date]'
}
export function isObject (val: any): val is Object {
return val !== null && typeof val === 'object'
}
實現(xiàn) url 參數(shù)處理邏輯
我們已經(jīng)實現(xiàn)了 buildURL 函數(shù)浇辜,接下來我們來利用它實現(xiàn) url 參數(shù)的處理邏輯。
在 index.ts 文件中添加如下代碼:
function axios (config: AxiosRequestConfig): void {
processConfig(config)
xhr(config)
}
function processConfig (config: AxiosRequestConfig): void {
config.url = transformUrl(config)
}
function transformUrl (config: AxiosRequestConfig): string {
const { url, params } = config
return bulidURL(url, params)
}
在執(zhí)行 xhr 函數(shù)前唾戚,我們先執(zhí)行 processConfig 方法柳洋,對 config 中的數(shù)據(jù)做處理,除了對 url 和 params 處理之外叹坦,未來還會處理其它屬性熊镣。
在 processConfig 函數(shù)內(nèi)部,我們通過執(zhí)行 transformUrl 函數(shù)修改了 config.url募书,該函數(shù)內(nèi)部調(diào)用了 buildURL轧钓。