查询参数中有多个具有相同键的字段（axios请求）？

Question

因此后端（不在我的控制范围内）需要一个类似这样的查询字符串：

http://example.com/?foo=5&foo=2&foo=11

但是axios使用一个JS对象来发送请求参数：

axios.get('http://example.com/', { foo: 5 });

显然，一个对象不能具有相同键的多个字段。

我如何发送具有相同键的多个字段的请求？

- Markus Meskanen

Answer 1

以下是 axios 文档中 请求配置 部分的内容：

  // `params` are the URL parameters to be sent with the request
  // Must be a plain object or a URLSearchParams object
  params: {
    ID: 12345
  },

要在请求中使用它，您需要执行

const request = {
  params: {
    foo: [5, 2, 11]
  }
}
axios.get('http://example.com/', request);

使用普通对象的问题在于数组参数会被添加为键名。

http://example.com/?foo[]=5&foo[]=2&foo[]=11

如果想要不使用[]来请求URL，请使用URLSearchParams。

var params = new URLSearchParams();
params.append("foo", 5);
params.append("foo", 2);
params.append("foo", 11);
var request = {
  params: params
};
axios.get('http://example.com/', request);

这将导致向服务器发送请求。

http://example.com/?foo=5&foo=2&foo=11

- nhydock

Answer 2

在 Axios 的请求配置中，您可以覆盖参数序列化，然后使用 QS NPM 模块以 repeat 模式序列化数组。

let params = { foo: [5, 2] }

axios.get('path/to/api/',{params}) // URL : https://path/to/api?foo[]=5&foo[]=2

let myAxios = axios.create({
    paramsSerializer: params => Qs.stringify(params, {arrayFormat: 'repeat'})
})
myAxios.get('path/to/api/',{params}) // URL : https://path/to/api?foo=5&foo=2

- Ashwin Kumar

---

坏消息是，这种方法会导致冒号被转义（对于UTC时间字符串来说并不理想）。 - Jay Edwards

我使用了 query-string 模块，它的工作方式类似，但没有 repeat 选项，而是默认执行相同的行为。 - slevin

为了避免编码值，可以像这样传递参数 { encode: false, arrayFormat: 'repeat' }。 - Tasos K.

Answer 3

在2022年最新版本的axios中，正确的答案是设置indexes: null以获取arrayFormat: 'repeat'。

更多信息：https://github.com/axios/axios/issues/5058#issuecomment-1272107602

示例：

const {data} = await axios.get('https://postman-echo.com/get', {
  params: {
    a: ['b', 'c', 'd']
  },
  paramsSerializer: {
    indexes: null // by default: false
  }
});

qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'indices' }) ==> config.paramsSerializer.indexes = true // 'a[0]=b&a[1]=c'

qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'brackets' }) ==> config.paramsSerializer.indexes = false// 'a[]=b&a[]=c' // 默认格式

qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'repeat' }) ==> config.paramsSerializer.indexes = null// 'a=b&a=c'

qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'comma' }) ==> 不支持 // 'a=b,c'

- Melroy van den Berg

---

完美运作！ - Serg

太好了！谢谢。 - undefined

Answer 4

更新：自从axios@1.1.2版本以来，Axios已经支持此功能。 https://github.com/axios/axios/issues/5058#issuecomment-1272107602

@RNR1 Axios已经默认支持此功能。默认情况下，Axios使用“括号”格式对数组进行编码，但支持3种qs格式，除了“逗号”格式。

qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'indices' }) ==> config.paramsSerializer.indexes = true // 'a[0]=b&a[1]=c'
qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'brackets' }) ==> config.paramsSerializer.indexes = false// 'a[]=b&a[]=c' // **Default**
qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'repeat' }) ==> config.paramsSerializer.indexes = null// 'a=b&a=c'
qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'comma' }) ==> **not supported** // 'a=b,c'

要以数组格式进行编码：“重复”，您需要执行以下操作：

  const {data} = await axios.get('https://postman-echo.com/get', {
    params: {
      a: ['b', 'c', 'd']
    },
    paramsSerializer: {
      indexes: null // by default: false
    }
  });

回声响应：

{
  args: { a: [ 'b', 'c', 'd' ] },
  headers: {
    'x-forwarded-proto': 'https',
    'x-forwarded-port': '443',
    host: 'postman-echo.com',
    'x-amzn-trace-id': 'Root=1-63409c06-5d9fc0344ceaf9715466e0e3',
    accept: 'application/json, text/plain, */*',
    'user-agent': 'axios/1.1.0',
    'accept-encoding': 'gzip, deflate, br'
  },
  url: 'https://postman-echo.com/get?a=b&a=c&a=d' 
}

- dazaiosm

---

虽然这个链接可能回答了问题，但最好在此处包含答案的基本部分并提供参考链接。如果链接页面更改，仅有链接的答案可能会失效。-【来自审查】 - DSDmark

好的，我已经更新了答案。 - dazaiosm

Answer 5

对@nhydock的答案进行补充说明。

当您执行

var request = {foo: [5, 2, 11] }

axios.get('http://example.com/', request);

对于 Django 应用程序，您可以将其接收为

self.request.query_params.getlist('foo')

也。

- Yash Agrawal

Answer 6

免责声明：我从未使用过Axios，并且在文档中找不到任何参考。但仍然值得一试。就个人而言，我会在库中这样实现它。

也可能将数组作为参数的值传递： axios.get('http://example.com/', { foo: [1, 2, 3, 4, 5] });

- Alex Pánek

---

抱歉 :( 我看到在构建URL的过程中有一个 paramSerializer，您可能可以利用它来使其也适用于数组。 - Alex Pánek

是的，我目前正在使用 query-string 包的 stringify() 函数，但我希望能找到另一种方法。不过可能并不存在这样的方法。 - Markus Meskanen

你可以向axios发送一个PR来修复这个问题 :) - Alex Pánek

Answer 7

如果使用准备好的URLSearchParams，在axios中处理具有相同名称的多个参数值也可以工作...我猜测对IE的支持是在2017年出现的...在Safari上也可以工作，尽管链接声称可能不行..

function getUrlParams(){
        // handles multiple param values with the same name
        var url_params = new URLSearchParams(); 

        if( window.location.toString().indexOf("?") != -1) {
           window.location.search.split('?')[1].split('#')[0]
              .replace(/([^=&]+)=([^&]*)/g, function(m, key, value) {
              var attr = decodeURIComponent(key)
              var val = decodeURIComponent(value)
              url_params.append(attr,val);
           });
        } else {
           // create a default set of params - you might not need this one ...
           url_params = { some_param:"some_value" };
        }
        return url_params ;
     }


     function getBackEndData(url_params, back_end_url){
           // the replace is just a fancy way of converting front-end to back-end call
           return axios.get( back_end_url , { params: url_params } )
           .then(response => {
              return response.data ;
           })
           .catch(function(error) {
              return error.response ; 
              console.log(error.response.data);
           })
     }

- Yordan Georgiev