前言：
在使用axios請(qǐng)求的過程中，大家可能會(huì)遇到get請(qǐng)求需要傳數(shù)組的情況：
直接在請(qǐng)求時(shí)傳參
const params = {
page: 1,
size: 10,
ids: [69, 71]
}
export function getMetricList(params) {
return axios.get(`/xxx/metrics`, {
params,
});
}
此時(shí)看到的控制臺(tái)network中這一項(xiàng)的請(qǐng)求是這樣：
直接傳數(shù)組格式
序列化
axios顯示直接傳數(shù)組去get請(qǐng)求時(shí)是 ids[]=69&ids[]=71
我們?nèi)绻胍獩]有 [] 連接的格式就需要進(jìn)行參數(shù)序列化：使用qs.stringify,設(shè)置axios配置項(xiàng)中的 paramsSerializer
import qs from 'qs';
export function getMetricList(params) {
return axios.get(`/xxx/metrics`, {
params,
paramsSerializer: params => {
return qs.stringify(params, { indices: false })
}
});
}
再次重新請(qǐng)求得到想要的格式：
正確請(qǐng)求格式
擴(kuò)展: qs
- qs.stringify
qs.stringify({ids: [1, 2, 3]}, { indices: false })
// ids=1&ids=2&ids=3
qs.stringify({ids: [1, 2, 3]}, { indices: true })
// ids[0]=1&ids[1]=2&id[2]=3
qs.stringify({ids: [1, 2, 3]}, {arrayFormat: ‘repeat‘})
// ids=1&ids=2&ids=3
qs.stringify({ids: [1, 2, 3]}, {arrayFormat: ‘brackets‘})
// ids[]=1&ids[]=2&ids[]=3
qs.stringify({ids: [1, 2, 3]}, {arrayFormat: ‘indices‘})
// ids[0]=1&ids[1]=2&ids[2]=3
qs.stringify({ids: [1, 2, 3]}, {arrayFormat: ‘comma‘})
// ids[0]=1&ids[1]=2&ids[2]=3
