Question

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

我尝试发送这样的数据：

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

所以，我应该得到这个网址：

{{1}}

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

Answer 1

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

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

Answer 2

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

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

Answer 3

使用JSON.stringify将数组绑定为字符串，然后以参数形式发送arrat。

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

Answer 4

这对我来说更好：

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

}）

Answer 5

就我而言，我的代码库中已经实现了jQuery。所以我只用了预定义的方法。

jQuery.param(Object)

Answer 6

非常感谢 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，请转到this link
在axios document中阅读有关paramsSerializer的更多信息
编辑参数格式：更多信息，请访问qs stringifying document

Answer 7

就我而言，我使用ES6数组函数。数组元素使querystring使用reduce函数。对象数组也可以。

const storeIds = [1,2,3]
axios.get('some url', {
  params: {
    storeIds: storeIds.reduce((f, s) => `${f},${s}`)
  }
})

Answer 8

就我而言，我正在使用类似的东西

const params = array.map((v)=>{
            return `p=${v}&`
        })

仅将params.join('')连接到获取数据的URL：

`url_to_get?${params.join('')`

在ASP.net的后端，我收到了

[FromUri] string [] p

Answer 9

我重写了 axios 中现有的 paramSerializer。以下代码段执行相同的序列化，同时将索引放在方括号之间。我试过 qs 但它与我的 python connexion 后端不兼容（用于 JSON 字符串参数）。

const rcg = axios.create({
    baseURL: `${url}/api`,
    paramsSerializer: params => {
        const parts = [];

        const encode = val => {
            return encodeURIComponent(val).replace(/%3A/gi, ':')
                .replace(/%24/g, '$')
                .replace(/%2C/gi, ',')
                .replace(/%20/g, '+')
                .replace(/%5B/gi, '[')
                .replace(/%5D/gi, ']');
        }

        const convertPart = (key, val) => {
            if (val instanceof Date)
                val = val.toISOString()
            else if (val instanceof Object)
                val = JSON.stringify(val)

            parts.push(encode(key) + '=' + encode(val));
        }

        Object.entries(params).forEach(([key, val]) => {
            if (val === null || typeof val === 'undefined')
                return

            if (Array.isArray(val))
                val.forEach((v, i) => convertPart(`${key}[${i}]`, v))
            else
                convertPart(key, val)
        })

        return parts.join('&')
    }
});

Answer 10

这对我有用：

axios.get("/financeiro/listar",{
        params: {
          periodo: this.filtro.periodo + "",
          mostrarApagados: this.filtro.mostrarApagados,
          mostrarPagos: this.filtro.mostrarPagos,
          categoria: this.filtro.categoria,
          conta: this.filtro.conta
        }
      })

Answer 11

我对使用“paramSerializer”有点困惑。在寻找在 Google 上使用带有数组查询字符串的 axios 的“正确方法”之前，我做了以下工作并开始工作：

var options = {};
var params = {};
for(var x=0;x<Products.length;x++){
   params[`VariableName[${x}]`] = Products[x].Id;
}
options.params = params;

axios.get(`https://someUrl/`, options)...

它将创建查询字符串参数，例如：

VariableName[0]=XPTO,VariableName[1]=XPTO2

大多数网络服务器期望哪种数组格式

如何正确使用axios params与数组

11 个答案: