Multiple fields with same key in query params (axios request)?

So the backend (not under my control) requires a query string like this:

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

But axios uses a JS object to send the request params:

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

And obviously an object can't have multiple fields with the same key.

How can I send a request with multiple fields with the same key?

75890 次浏览
小开

Disclaimer: I have never used Axios and couldn't find any reference in the documentation. It is still worth a try. Personally, I would implement it this way in a library.

It might also be possible to pass arrays as values for the parameter:

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

小开
最佳答案

From the Request Config section of the axios documentation:

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

To use this in a request, you would do

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

The issue with using a plain object is that array parameters are added as

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

To make a request to a URL without the [], use 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);

This will result in a request to

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

In Axios request config, you can override params serialization and then use QS NPM module to serialize array with repeat mode

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
小开

If one uses the ready URLSearchParams the handling of multiple parameter values with the same name works with axios as well ... I guess the support for IE came in 2017 ... Works on Safari too, although the links claims that it might not ..

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

Adding more details to @nhydock accepted answer. When you do 

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

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

For django application you can receive these as

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

also.

小开

The following works fine:

axios.get(`'http://example.com/${foo1}&${foo2}`);

提交答案