需求
在之前的章节中,我们对请求的url参数做了处理,我们会解析传入的params对象,根据一定的规则把它解析成字符串,然后添加在url后面。在解析的过程中,我们会对字符串encode,但是对于一些特殊字符串比如@、+等却并不转义,这是axios库默认的解析规则。当然,我们也希望自己定义解析规则,于是我们希望ts-axios能在请求配置中允许我们配置一个paramsSerializer函数来自定义参数的解析规则,该函数接受params参数,返回值作为解析后的结果,如:
axios.get('/more/get', {
params: {
a: 1,
b: 2,
c: ['a', 'b', 'c']
},
paramsSerializer(params) {
return qs.stringify(params, { arrayFormat: 'brackets' })
}
}).then(res => {
console.log(res)
})
代码实现
首先修改类型定义:
interface AxiosRequestConfig {
// ...
paramsSerializer?: (params: any) => string
}
修改buildUrl实现
function buildUrl(url: string, params?: any, paramsSerializer?: any) {
// 去掉哈希符号
const hashIndex = url.indexOf('#')
if (hashIndex !== -1) {
url = url.slice(0, hashIndex)
}
if (!params) {
return url
}
let serializedParams
if (paramsSerializer) {
serializedParams = paramsSerializer(params)
} else if (isURLSearchParams(params)) {
serializedParams = params.toString()
} else {
const parts: string[] = []
Object.keys(params).forEach(key => {
let val = params[key]
if (val === null || 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 (isPlainObject(val)){
val = JSON.stringify(val)
}
parts.push(`${encode(key)}=${encode(val)}`)
})
})
serializedParams = parts.join('&')
}
url += (url.indexOf('?') === -1 ? '?' : '&') + serializedParams
return url
}
这里,我们给buildUrl函数新增了paramsSerializer可选参数,另外我们还新增了对params类型判断,如果它是一个URLSearchParams对象实例的话,我们直接返回它toString的结果。
helpers/util.ts
function isURLSearchParams(val: any): val is URLSearchParams {
return typeof val !== 'undefined' && val instanceof URLSearchParams
}
最后修改buildUrl的调用逻辑:
function transformURL(config: AxiosRequestConfig): string {
const { url, params, paramsSerializer } = config
return buildURL(url!, params, paramsSerializer)
}
demo
axios.get('/api/extend/get', {
paramsSerializer(params) {
return qs.stringify(params, { arrayFormat: 'brackets' })
},
params: {
a: 1,
b: 2,
c: ['a', 'b', 'c']
}
})
axios.get('/api/extend/get', {
params: {
a: 1,
b: 2,
c: ['a', 'b', 'c']
}
})
axios.get('/api/extend/get', {
params: new URLSearchParams('a=1&b=2')
})
网友评论