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

Question

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?

Answer 1

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 

Answer 2

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