如何在数组中正确使用 axios 参数

Question

如何为查询字符串中的数组添加索引？

我试过这样发送数据：

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

我得到了这个 url:

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

所以，我应该得到这个 url:

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

我应该在我的参数选项中添加什么才能得到这个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.get('/myController/myAction', {
params: { storeIds: [1,2,3] + ''}

})

Answer 3

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

jQuery.param(Object)

Answer 4

非常感谢 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
编辑参数格式：在 qs stringifying document

Answer 5

在我的例子中，我使用 ES6 数组函数。数组元素使querystring 使用reduce 函数。对象数组也可以。

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

Answer 6

就我而言，我正在使用这样的东西

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

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

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

在我的后端 ASP.net 我收到了这个

[FromUri] string [] p

Answer 7

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

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

Answer 8

我重写了 axios 中现有的 paramSerializer。以下代码片段执行相同的序列化，同时将索引放在方括号之间。我试过 qs 但它与我的 python 连接后端不兼容（对于 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 9

这对我有用：

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 10

我在使用“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

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

Answer 11

我知道这种方法不是很好，我也不知道它可能有什么缺点，但我试过了，它奏效了：

在发出请求之前，准备参数：

  let params = '?';

  for (let i = 0; i < YOUR_ARRAY.length; i++) {  // In this case YOUR_ARRAY == [1, 2, 3]
    params += `storeIds=${YOUR_ARRAY[i]}`;  // storeIds is your PARAM_NAME
    if (i !== YOUR_ARRAY.length - 1) params += '&';
  }

然后像这样发出请求：

axios.get('/myController/myAction' + params)

Answer 12

此答案的灵感来自。

但可能与发布的问题无关。

以下代码用于生成具有随对象数组提供的重复键的查询参数。

注意：如果您是 bundlephobia, use the following approach with care: as with UrlSearchParams support varies on different browsers and platforms 的开发者。

const queryParams = [{key1: "value1"}, {key2: "value2"}]

axios.get('/myController/myAction', {
  params: queryParams,
  paramsSerializer: params => {
    return params.map((keyValuePair) => new URLSearchParams(keyValuePair)).join("&")
  }
})

// request -> /myController/myAction?key1=value1&key2=value2

如何在数组中正确使用 axios 参数

How to correctly use axios params with arrays

javascript

arrays

http-get

axios