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 JS object to send the request params:
axios.get('http://example.com/', { foo: 5 });
And obviously such object can't have multiple fields with the same key.
How can I send a request with multiple fields with same key?
From the axios documentation on the request config
// `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
var request = {
params: {
foo: [5, 2, 11]
}
}
axios.get('http://example.com/', request);
The only issue with using a plain object approach is that array parameters are added as
http://example.com/?foo[]=5&foo[]=2&foo[]=11
To get request without the []
like you want, you can use the 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 as
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