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

204

Cela peut sembler stupide, mais j'essaie d'obtenir les données d'erreur lorsqu'une demande é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, est-il possible d'obtenir un objet avec peut-être le code d'état et le contenu? Par exemple:

Object = {status: 404, reason: 'Not found', body: '404 Not found'}
Sebastian Olsen
la source

Réponses:

371

Ce que vous voyez est la chaîne retournée par la toStringméthode de l' errorobjet. ( errorn'est pas une chaîne.)

Si une réponse a été reçue du serveur, l' errorobjet contiendra la responseproprié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);
    }
  });
Nick Uraltsev
la source
9
Pouvez-vous expliquer la magie derrière la transformation automatique en chaîne si je ne fais pas référence à la responsepropriété?
Sebastian Olsen
7
console.logutilise la toStringméthode pour formater les Errorobjets. Cela n'a rien à voir avec la référence à la responsepropriété.
Nick Uraltsev
3
Je suis toujours confus, est-ce spécifique aux objets d'erreur ou? Si je console.log un objet, j'obtiens l'objet, pas une chaîne.
Sebastian Olsen
3
Cela dépend de la mise en œuvre. Par exemple, l'implémentation node.js de console.log gère les Error objets comme un cas particulier. Je ne peux pas dire comment il est mis en œuvre exactement dans les navigateurs, mais si vous appelez console.log({ foo: 'bar' });et console.log(new Error('foo'));dans la console Chrome DevTools, vous verrez que les résultats sont différents.
Nick Uraltsev
5
Ça doit être une chose indigène alors. C'est quand même étrange.
Sebastian Olsen
17

Comme l'a dit @Nick, les résultats que vous voyez lorsque vous utilisez console.logun Errorobjet JavaScript dépendent de l'implémentation exacte de console.log, qui varie et (imo) rend la vérification des erreurs incroyablement ennuyeuse.

Si vous souhaitez voir l' Errorobjet complet et toutes les informations qu'il contient en contournant la toString()méthode, vous pouvez simplement utiliser JSON.stringify :

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

J'utilise ces intercepteurs pour obtenir la réponse d'erreur.

const HttpClient = axios.create({
  baseURL: env.baseUrl,
});

HttpClient.interceptors.response.use((response) => {
  return response;
}, (error) => {
  return Promise.resolve({ error });
});
bronzer
la source
6

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)
  })
Yan QiDong
la source
2

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

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

Attention: ce ne sera pas une instance d'erreur.

Moïse Schwartz
la source
1

Ceci est un bug connu, essayez d'utiliser "axios": "0.13.1"

https://github.com/mzabriskie/axios/issues/378

J'ai eu le même problème alors j'ai fini par utiliser "axios": "0.12.0". Ça fonctionne bien pour moi.

Dmitriy Nevzorov
la source
1
Ce n'est pas le même problème que j'ai, il n'y a même pas d'objet impliqué lorsque je me connecteerror
Sebastian Olsen
1

Il y a une nouvelle option appelée validateStatusdans request config. Vous pouvez l'utiliser pour spécifier de ne pas lever d'exceptions si l'état <100 ou l'état> 300 (comportement par défaut). Exemple:

const {status} = axios.get('foo.com', {validateStatus: () => true})
Dmytro Naumenko
la source
0

Vous pouvez mettre l'erreur dans un objet et enregistrer l'objet, comme ceci:

axios.get('foo.com')
    .then((response) => {})
    .catch((error) => {
        console.log({error}) // this will log an empty object with an error property
    });

J'espère que cela aidera quelqu'un là-bas.

Mendy
la source
0

Afin d'obtenir le code d'état http renvoyé par le serveur, vous pouvez ajouter des validateStatus: status => trueoptions axios:

axios({
    method: 'POST',
    url: 'http://localhost:3001/users/login',
    data: { username, password },
    validateStatus: () => true
}).then(res => {
    console.log(res.status);
});

De cette façon, chaque réponse http résout la promesse renvoyée par axios.

https://github.com/axios/axios#handling-errors

Emre Tapcı
la source
0

C'est mon code: travaille pour moi

 var jsonData = request.body;
    var jsonParsed = JSON.parse(JSON.stringify(jsonData));

    // message_body = {
    //   "phone": "5511995001920",
    //   "body": "WhatsApp API on chat-api.com works good"
    // }

    axios.post(whatsapp_url, jsonParsed,validateStatus = true)
    .then((res) => {
      // console.log(`statusCode: ${res.statusCode}`)

            console.log(res.data)
        console.log(res.status);

        // var jsonData = res.body;
        // var jsonParsed = JSON.parse(JSON.stringify(jsonData));

        response.json("ok")
    })
    .catch((error) => {
      console.error(error)
        response.json("error")
    })
Rodrigo Grossi
la source