如何正确使用axios params与数组

Question

如何在查询字符串中向数组添加索引？

我尝试发送这样的数据:

axios.get('/myController/myAction', { params: { storeIds: [1,2,3] })

我得到了这个网址:

http://localhost/api/myController/myAction?storeIds[]=1&storeIds[]=2&storeIds[]=3

所以,我应该得到这个网址:

http://localhost/api/myController/myAction?storeIds[0]=1&storeIds[1]=2&storeIds[2]=3

我应该在我的params选项中添加什么来获取此URL？

Answer 1

您可以paramsSerializer通过https://www.npmjs.com/package/qs使用和序列化参数

axios.get('/myController/myAction', {
  params: {
    storeIds: [1,2,3]
  },
  paramsSerializer: params => {
    return qs.stringify(params)
  }
})

Answer 2

此行为已添加到axios从 version 开始1.0.0。请paramsSerializer.indexes参阅https://github.com/axios/axios/tree/v1.0.0#request-config

这是使用您的示例代码的示例：

axios.get('/myController/myAction', {
  params: { storeIds: [1,2,3] },
  paramsSerializer: {
    indexes: true, // use brackets with indexes
  }
)

生成的查询参数将在括号内包含索引：

/myController/myAction?storeIds[0]=1&storeIds[1]=2&storeIds[2]=3

其他paramsSerializer.indexes值是null（无括号）：

axios.get('/myController/myAction', {
  params: { storeIds: [1,2,3] },
  paramsSerializer: {
    indexes: null, // no brackets at all
  }
)
// /myController/myAction?storeIds=1&storeIds=2&storeIds=3

和默认值false（没有索引的括号）：

axios.get('/myController/myAction', {
  params: { storeIds: [1,2,3] },
  paramsSerializer: {
    indexes: false, // brackets but no indexes
  }
)
// /myController/myAction?storeIds[]=1&storeIds[]=2&storeIds[]=3

Answer 3

非常感谢Nicu Criste的回答，就我而言，API 需要这样的参数：

params: {
  f: {
    key: 'abc',
    categories: ['a','b','c']
   },
  per_page: 10
}

方法是GET，这个API要求的格式是：API?f[key]=abc&f[categories][]=a&f[categories][]=b... 所以我这样分配了axios的paramsSerializer：

config.paramsSerializer = p => {
      return qs.stringify(p, {arrayFormat: 'brackets'})
    }

• 安装qs请转到此链接
  
• 在axios 文档中阅读有关 paramsSerializer 的更多信息
• 参数的编辑格式：在qs stringifying 文档中阅读更多信息

Answer 4

无需添加更多库并使用 ES6，您可以编写：

axios.get(`/myController/myAction?${[1,2,3].map((n, index) => `storeIds[${index}]=${n}`).join('&')}`);