HeavyCookie's Kitchen 🍪

Utiliser Axios.get avec des tableaux de paramètres complexes

August 19, 2019

Axios me simplifie généralement la vie, mais on est parfois amené à utiliser des endpoints REST nécessitant d’utiliser des objets imbriqués. Imaginons avoir l’objet suivant :

type Request = {
  query: string
  coordinates: {
    latitude: number
    longitude: number
  }
}

Sans configuration, Axios va correctement encoder le contenu de query, mais va m’encoder mon champ coordinates en base64.

Pour éviter ce problème, il suffit d’ajouter la librairie qs à coup de

yarn install qs

Puis de créer un fichier de configuration comme celui-ci :

import Axios from 'axios'
import qs from 'qs'

Axios.interceptors.request.use(config => {
  window.console.log(config)

  config.paramsSerializer = params =>
    return qs.stringify(params, {
      arrayFormat: 'brackets',
      encode: false,
    })


  return config
})

Il ne reste plus qu’à importer cette configuration dans votre projet et le tour est joué !