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 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?

Answer 1

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

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

Answer 3

The correct answer with the latest axios version (in the year 2022) would be to set indexes: null in order to get arrayFormat: 'repeat'.

More info: https://github.com/axios/axios/issues/5058#issuecomment-1272107602

Example:

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' // 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'

Answer 4

Update: Axios already supports this out of the box as of axios@1.1.2 https://github.com/axios/axios/issues/5058#issuecomment-1272107602

@RNR1 Axios already supports this out of the box. By default, Axios encodes arrays in "bracket" format but supports 3 qs formats except "comma".

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'

So to encode in arrayFormat: 'repeat' you need to do the following:

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

Echo response:

{
  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' 
}

Answer 5

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.

Answer 6

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

Answer 7

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