Wie kann ich den Statuscode von einem http-Fehler in Axios erhalten?

200

Das mag dumm erscheinen, aber ich versuche, die Fehlerdaten abzurufen, wenn eine Anforderung in Axios fehlschlägt.

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

Ist es möglich, anstelle der Zeichenfolge ein Objekt mit möglicherweise dem Statuscode und dem Inhalt abzurufen? Beispielsweise:

Object = {status: 404, reason: 'Not found', body: '404 Not found'}
javascript axios Sebastian Olsen
quelle

Antworten:

361

Was Sie sehen, ist die Zeichenfolge, die von der toStringMethode des errorObjekts zurückgegeben wird. ( errorist keine Zeichenfolge.)

Wenn eine Antwort vom Server empfangen wurde, enthält das errorObjekt die responseEigenschaft:

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
quelle
9
Können Sie die Magie dahinter erklären, die sich automatisch in eine Zeichenfolge verwandelt, wenn ich mich nicht auf die responseEigenschaft beziehe ?
Sebastian Olsen
7
console.logVerwendet die toStringMethode zum Formatieren von ErrorObjekten. Es hat nichts mit der Bezugnahme auf die responseImmobilie zu tun .
Nick Uraltsev
2
Ich bin immer noch verwirrt, ist das spezifisch für Fehlerobjekte oder? Wenn ich ein Objekt console.log, erhalte ich das Objekt, keine Zeichenfolge.
Sebastian Olsen
3
Das hängt von der Implementierung ab. Zum Beispiel node.js Implementierung von console.log Griffen Error Objekte als Sonderfall. Ich kann nicht sagen, wie genau es in Browsern implementiert ist, aber wenn Sie console.log({ foo: 'bar' });und console.log(new Error('foo'));in der Chrome DevTools Console aufrufen, werden Sie feststellen, dass die Ergebnisse anders aussehen.
Nick Uraltsev
5
Muss dann eine einheimische Sache sein. Es ist trotzdem seltsam.
Sebastian Olsen
17

Wie @Nick sagte, hängen die Ergebnisse, die Sie sehen, wenn Sie console.logein JavaScript- ErrorObjekt verwenden, von der genauen Implementierung ab console.log, die variiert und (imo) das Überprüfen von Fehlern unglaublich ärgerlich macht.

Wenn Sie das vollständige ErrorObjekt und alle darin enthaltenen Informationen unter Umgehung der toString()Methode anzeigen möchten , können Sie einfach JSON.stringify verwenden :

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

Ich benutze diese Interceptors, um die Fehlerantwort zu erhalten.

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

HttpClient.interceptors.response.use((response) => {
  return response;
}, (error) => {
  return Promise.resolve({ error });
});
Bräunen
quelle
6

Mit TypeScript ist es einfach, mit dem richtigen Typ zu finden, was Sie wollen.

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
quelle
2

Mit dem Spread-Operator ( ...) können Sie ein neues Objekt wie folgt erzwingen:

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

Beachten Sie: Dies ist keine Fehlerinstanz.

Moses Schwartz
quelle
1

Dies ist ein bekannter Fehler, versuchen Sie ihn zu verwenden "axios": "0.13.1"

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

Ich hatte das gleiche Problem und habe es letztendlich benutzt "axios": "0.12.0". Es funktioniert gut für mich.

Dmitriy Nevzorov
quelle
1
Dies ist nicht das gleiche Problem, das ich habe, es ist nicht einmal ein Objekt beteiligt, wenn ich mich anmeldeerror
Sebastian Olsen
1

validateStatusIn der Anforderungskonfiguration gibt es eine neue Option . Sie können damit festlegen, dass keine Ausnahmen ausgelöst werden, wenn Status <100 oder Status> 300 (Standardverhalten). Beispiel:

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

Sie können den Fehler in ein Objekt einfügen und das Objekt folgendermaßen protokollieren:

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

Hoffe das hilft jemandem da draußen.

Mendy
quelle
0

Um den vom Server zurückgegebenen http-Statuscode zu erhalten, können Sie validateStatus: status => trueaxios-Optionen hinzufügen :

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

Auf diese Weise löst jede http-Antwort das von axios zurückgegebene Versprechen.

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

Emre Tapcı
quelle