Jak mogę uzyskać kod statusu z błędu http w Axios?

203

To może wydawać się głupie, ale próbuję uzyskać dane o błędach, gdy żądanie zakończy się niepowodzeniem w Axios.

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

Czy zamiast ciągu można uzyskać obiekt z kodem stanu i zawartością? Na przykład:

Object = {status: 404, reason: 'Not found', body: '404 Not found'}
Sebastian Olsen
źródło

Odpowiedzi:

369

Widzisz ciąg znaków zwrócony przez toStringmetodę errorobiektu. ( errornie jest łańcuchem.)

Jeśli otrzymano odpowiedź z serwera, errorobiekt będzie zawierał responsewłaściwość:

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
źródło
9
Czy potrafisz wyjaśnić magię kryjącą się za tym automatycznie, zamieniając się w ciąg, jeśli nie odwołuję się do responsewłaściwości?
Sebastian Olsen,
7
console.logużywa toStringmetody do formatowania Errorobiektów. Nie ma to nic wspólnego z odwoływaniem się do responsenieruchomości.
Nick Uraltsev
2
Nadal jestem zdezorientowany, czy jest to charakterystyczne dla obiektów błędu lub? Jeśli konsola.loguje obiekt, otrzymuję obiekt, a nie ciąg znaków.
Sebastian Olsen,
3
To zależy od implementacji. Na przykład implementacja node.js console.log obsługuje Error obiekty jako szczególny przypadek. Nie mogę powiedzieć, jak dokładnie jest on zaimplementowany w przeglądarkach, ale jeśli zadzwonisz console.log({ foo: 'bar' });i console.log(new Error('foo'));w konsoli Chrome DevTools, zobaczysz, że wyniki wyglądają inaczej.
Nick Uraltsev
5
To musi być rodzima rzecz. To wciąż dziwne.
Sebastian Olsen,
17

Jak powiedział @Nick, wyniki, które widzisz, gdy obiekt console.logJavaScript Errorzależy od dokładnej implementacji console.log, która jest różna i (imo) sprawia, że ​​sprawdzanie błędów jest niezwykle denerwujące.

Jeśli chcesz zobaczyć pełny Errorobiekt i wszystkie informacje, które zawiera, pomijając toString()metodę, możesz po prostu użyć JSON.stringify :

axios.get('/foo')
  .catch(function (error) {
    console.log(JSON.stringify(error))
  });
danii
źródło
8

Używam tych przechwytywaczy, aby uzyskać odpowiedź na błąd.

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

HttpClient.interceptors.response.use((response) => {
  return response;
}, (error) => {
  return Promise.resolve({ error });
});
Dębnik
źródło
6

Dzięki TypeScript łatwo jest znaleźć to, czego szukasz, dzięki odpowiedniemu typowi.

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
źródło
2

Możesz użyć operatora spread ( ...), aby zmusić go do utworzenia nowego obiektu, takiego jak ten:

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

Pamiętaj: nie będzie to wystąpienie błędu.

Mojżesz Schwartz
źródło
1

To znany błąd, spróbuj go użyć "axios": "0.13.1"

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

Miałem ten sam problem, więc skończyłem używać "axios": "0.12.0". Działa dla mnie dobrze.

Dmitrij Nevzorov
źródło
1
To nie to samo, co mam, nie loguję się nawet w jakiś przedmioterror
Sebastian Olsen
1

Istnieje nowa opcja o nazwie validateStatusw konfiguracji żądania. Można go użyć, aby określić, aby nie zgłaszać wyjątków, jeśli status <100 lub status> 300 (zachowanie domyślne). Przykład:

const {status} = axios.get('foo.com', {validateStatus: () => true})
Dmytro Naumenko
źródło
0

Możesz umieścić błąd w obiekcie i zarejestrować obiekt w następujący sposób:

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

Mam nadzieję, że pomoże to komuś tam.

Mendy
źródło
0

Aby uzyskać kod stanu HTTP zwrócony z serwera, możesz dodać validateStatus: status => truedo opcji axios:

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

W ten sposób każda odpowiedź HTTP rozwiązuje obietnicę zwróconą z axios.

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

Emre Tapcı
źródło
0

To mój kod: Pracuj dla mnie

 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
źródło