La librairie Axios

La librairie tierce Axios permet de remplacer la fonction fetch par une syntaxe plus légère :

• une seule promise au lieu de deux promises successives
• pas besoin de créer un objet Headers pour les en-têtes, on utilise un simple objet
• pas besoin de convertir manuellement le corps de la requête en JSON, on peut passer un simple objet

Les données HTTP sont obtenues dans l'attribut data de l'objet réponse :

import axios from 'axios';

axios.get('/api/users')
  .then(res => setUsers(res.data))

Avec traitement d'erreur :

axios.get('/api/users')
  .then(res => setUsers(res.data))
  .catch(error => console.log(error.msg));

Syntaxe async/await :

export async function getUsers() {
  const res = await axios.get('/api/users')
  setUsers(res.data);
}

Syntaxe async/await avec traitement d'erreur :

export async function getUsers () {
  try {
    const res = await axios.get('/api/users')
    setUsers(res.data);
  } catch (error) {
    console.log(error.msg);
  }
}

Exemples plus complets

Méthode POST

La syntaxe est axios.post(url, data, config):

axios.post('/api/users',
  {firstName: 'Larry', lastName: 'SKYWALKER'},
  {headers: {Authorization: 'Bearer ...'}},
).then(console.log('User created'));

Note : les autres méthodes (PUT, PATCH, DELETE) sont utilisables de la même façon.

Syntaxe async/await :

export async function addUser() {
  await axios.post('/api/users',
    { firstName: 'Larry', lastName: 'SKYWALKER' },
    { headers: { 'Authorization': 'Bearer ...' } },
  );
  console.log('User created');
}

Utilisation directe de la fonction axios

La syntaxe d'appel directe est axios(config) :

axios({
  url:     '/api/users',
  method:  'POST',
  headers: {'Authorization': 'Bearer ...'},
  data:    {firstName: 'Larry', lastName: 'SKYWALKER'}
}).then(console.log('User created'));

Avec async/await :

export async function addUser() {
  await axios({
    url:     '/api/users',
    method:  'POST',
    headers: { 'Authorization': 'Bearer ...' },
    body:    { firstName: 'Larry', lastName: 'SKYWALKER' }
  });
  console.log('User created');
}

Configuration par défaut via une instance Axios

Il est possible de créer une instance préconfigurée avec des options par défaut et de l'utiliser pour lancer des requêtes :

import axios from 'axios';
import baseUrl from './common/const';

const { authToken } = useContext(AppContext);

// Instance Axios
const instance = axios.create({
  baseURL: baseUrl,
  headers: { Authorization: `Bearer ${authToken}`}
});

// 
instance.post('/users', {...})