美文网首页
axios中get请求传参为数组/参数序列化

axios中get请求传参为数组/参数序列化

作者: Fairy_妍 | 来源:发表于2021-11-23 13:37 被阅读0次

前言:

在使用axios请求的过程中,大家可能会遇到get请求需要传数组的情况:
直接在请求时传参

const params = {
  page: 1,
  size: 10,
  ids: [69, 71]
}
export function getMetricList(params) {
  return axios.get(`/xxx/metrics`, {
    params,
  });
}

此时看到的控制台network中这一项的请求是这样:


直接传数组格式

序列化

axios显示直接传数组去get请求时是 ids[]=69&ids[]=71
我们如果想要没有 [] 连接的格式就需要进行参数序列化:使用qs.stringify,设置axios配置项中的 paramsSerializer

import qs from 'qs';
export function getMetricList(params) {
  return axios.get(`/xxx/metrics`, {
    params,
    paramsSerializer: params => {
      return qs.stringify(params, { indices: false })
    }
  });
}

再次重新请求得到想要的格式:


正确请求格式

扩展: qs

  1. 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

相关文章

网友评论

      本文标题:axios中get请求传参为数组/参数序列化

      本文链接:https://www.haomeiwen.com/subject/tzwltrtx.html