Question

所以后端（不在我的控制之下）需要一个像这样的查询字符串：

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

但axios使用JS对象发送请求参数：

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

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

如何使用相同的密钥发送包含多个字段的请求？

Answer 1

来自request config
上的axios文档

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

要在请求中使用此功能，您可以执行

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

使用普通对象方法的唯一问题是数组参数被添加为

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

要获得不需要[]的请求，您可以使用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

Answer 2

在Axios请求配置中，您可以覆盖params序列化，然后使用 QS NPM模块以重复模式序列化数组

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

Answer 3

如果使用现成的URLSearchParams，则具有相同名称的多个参数值的处理也可以与axios一起使用...我想对IE的支持是在2017年推出的。链接声称它可能不会..

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);
           })
     }

Answer 4

在@nhydock接受的答案中添加更多详细信息。

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

axios.get（'http://example.com/'，request）;

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

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

也。

Answer 5

免责声明：我从未使用过Axios，也找不到任何参考资料文件。它还值得一试。就我个人而言在库中以这种方式实现它。

也可以将数组作为参数的值传递：

axios.get('http://example.com/', { foo: [1, 2, 3, 4, 5] });

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

5 个答案: