Ts重構Axios url處理篇

2022-11-24 23:17:08 字數 1895 閱讀 7068

首先,我們可能需要使用我們封裝的axios去傳送一個下面這樣的簡單請求

axios(

})

最終,我們希望我們傳送的請求url是這樣的,/api/getinfo?a=1&b=2,這樣伺服器就可以通過請求的url解析到我們傳來的引數了。那麼,我們要做的實際上就是把params的key和vaule拼接到url上,當然,params是很負責的,可能會有以下幾種情況:

axios(

})

最終請求的url是這樣的:/api/getinfo?foo=bar&foo=baz

axios(

}})

最終請求的url是這樣的: /api/getinfo?foo=%7b%22bar:%22baz%2z%7d,foo後面拼接的是encode後的結果

axios(

})

最終請求的url是/api/getinfo?date=2019-04-01t05:55:39.030z,date後面跟的是date.toisostring()的結果

對於@、:、$、[、]、空格,我們是允許出現在url中的,不希望encode

axios(

})

最終請求的url是這樣的:/api/[email protected]:$+,注意我們會把空格轉換成+

對於值為null或者undefined的屬性,我們是不會新增到url引數中的。

axios(

})

最終請求的url是:/api/getinfo?foo=bar

axios(

})

最終請求的url是:/api/getinfo?foo=bar

axios(

})

最終請求的url是:/api/getinfo?foo=bar&bar=baz

根據上面我們的分析,接下來我們來實現一個工具function,然後把params拼接到url上,並能處理上面這幾種params

// helpers/util.ts

const tostring = object.prototype.tostring

export function isdate(val: any): val is date

export function isobject(val: any): val is object

export function isplainobject(val: any): val is object

// helpers/url.ts

import  from './util'

import from 'punycode';

export function buildurl(url: string, params?: any): string

const parts: string =

object.keys(params).foreach(key =>

let values =

if (array.isarray(val)) else

values.foreach(val => else if (isplainobject(val))

parts.push(`$=$`)

})})

let serialzedparams = parts.join('&')

if (serialzedparams)

url += (url.indexof('?') === -1 ? '?' : '&')

}return url

}