Comment puis-je obtenir le code d'état d'une erreur http dans Axios ?

Question

Cela peut sembler stupide, mais j'essaie d'obtenir les données d'erreur lorsqu'une requête échoue dans Axios.

axios.get('foo.com')
    .then((response) => {})
    .catch((error) => {
        console.log(error) //Logs a string: Error: Request failed with status code 404
    })

Au lieu de la chaîne de caractères, est-il possible d'obtenir un objet contenant peut-être le code d'état et le contenu ? Par exemple :

Object = {status: 404, reason: 'Not found', body: '404 Not found'}

Answer 1

Ce que vous voyez est la chaîne de caractères renvoyée par la fonction toString de la méthode error objet. ( error n'est pas une chaîne de caractères).

Si une réponse a été reçue du serveur, l'option error contiendra l'objet response propriété :

axios.get('/foo')
  .catch(function (error) {
    if (error.response) {
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
    }
  });

Answer 2

Avec TypeScript, il est facile de trouver ce que vous voulez avec le bon type.

import { AxiosResponse, AxiosError } from 'axios'

axios.get('foo.com')
  .then(response: AxiosResponse => {
    // Handle response
  })
  .catch((reason: AxiosError) => {
    if (reason.response!.status === 400) {
      // Handle 400
    } else {
      // Handle else
    }
    console.log(reason.message)
  })

Answer 3

Comme l'a dit @Nick, les résultats que vous obtenez lorsque vous console.log un JavaScript Error dépend de l'implémentation exacte de l'objet console.log qui varie et (imo) rend la vérification des erreurs incroyablement ennuyeuse.

Si vous souhaitez voir l'intégralité Error et toutes les informations qu'il transporte en contournant le toString() vous pouvez simplement utiliser la méthode JSON.stringify :

axios.get('/foo')
  .catch(function (error) {
    console.log(JSON.stringify(error))
  });

Answer 4

Il existe une nouvelle option appelée validateStatus dans la configuration des demandes. Vous pouvez l'utiliser pour spécifier de ne pas lancer d'exceptions si le statut < 100 ou le statut > 300 (comportement par défaut). Exemple :

const {status} = axios.get('foo.com', {validateStatus: () => true})

Answer 5

Vous pouvez utiliser l'opérateur d'étalement ( ... ) pour le forcer dans un nouvel objet comme ceci :

axios.get('foo.com')
    .then((response) => {})
    .catch((error) => {
        console.log({...error}) 
})

Attention : il ne s'agira pas d'une instance de Error.