Bagaimana saya bisa mendapatkan kode status dari kesalahan http di Axios?

201

Ini mungkin tampak bodoh, tapi saya mencoba untuk mendapatkan data kesalahan ketika permintaan gagal di Axios.

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

Alih-alih string, apakah mungkin untuk mendapatkan objek dengan kode status dan konten? Sebagai contoh:

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

Jawaban:

363

Apa yang Anda lihat adalah string yang dikembalikan oleh toStringmetode errorobjek. ( errorbukan string.)

Jika respons telah diterima dari server, errorobjek akan berisi responseproperti:

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
sumber
9
Bisakah Anda menjelaskan keajaiban di baliknya secara otomatis berubah menjadi string jika saya tidak merujuk ke responseproperti?
Sebastian Olsen
7
console.logmenggunakan toStringmetode untuk memformat Errorobjek. Itu tidak ada hubungannya dengan merujuk ke responseproperti.
Nick Uraltsev
2
Saya masih bingung, apakah ini spesifik untuk objek error atau? Jika saya console.log objek, saya mendapatkan objek, bukan string.
Sebastian Olsen
3
Tergantung implementasi. Sebagai contoh, implementasi node.js console.log menangani Error objek sebagai kasus khusus. Saya tidak bisa mengatakan bagaimana tepatnya itu diterapkan di browser, tetapi jika Anda menelepon console.log({ foo: 'bar' });dan console.log(new Error('foo'));di Chrome DevTools Console, Anda akan melihat bahwa hasilnya terlihat berbeda.
Nick Uraltsev
5
Pasti hal yang asli. Ini masih aneh.
Sebastian Olsen
17

Seperti yang dikatakan @Nick, hasil yang Anda lihat saat Anda objek console.logJavaScript Errorbergantung pada implementasi tepat console.log, yang bervariasi dan (imo) membuat pengecekan kesalahan sangat mengganggu.

Jika Anda ingin melihat Errorobjek lengkap dan semua informasi yang dibawanya melewati toString()metode ini, Anda bisa menggunakan JSON.stringify :

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

Saya menggunakan pencegat ini untuk mendapatkan respons kesalahan.

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

HttpClient.interceptors.response.use((response) => {
  return response;
}, (error) => {
  return Promise.resolve({ error });
});
Tan
sumber
6

Dengan TypeScript, mudah untuk menemukan apa yang Anda inginkan dengan tipe yang tepat.

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

Anda bisa menggunakan operator spread ( ...) untuk memaksanya ke objek baru seperti ini:

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

Sadarilah: ini tidak akan menjadi contoh Kesalahan.

Moses Schwartz
sumber
1

Ini adalah bug yang dikenal, coba gunakan "axios": "0.13.1"

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

Saya memiliki masalah yang sama sehingga akhirnya saya gunakan "axios": "0.12.0". Ini bekerja dengan baik untuk saya.

Dmitriy Nevzorov
sumber
1
Ini bukan masalah yang sama yang saya alami, bahkan tidak ada objek yang terlibat ketika saya logerror
Sebastian Olsen
1

Ada opsi baru yang disebut validateStatusdalam permintaan konfigurasi. Anda dapat menggunakannya untuk menentukan untuk tidak membuang pengecualian jika status <100 atau status> 300 (perilaku default). Contoh:

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

Anda bisa memasukkan kesalahan ke dalam objek dan mencatat objek, seperti ini:

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

Semoga ini bisa membantu seseorang di luar sana.

Mendy
sumber
0

Untuk mendapatkan kembali kode status http dari server, Anda dapat menambahkan validateStatus: status => trueopsi axios:

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

Dengan cara ini, setiap respons http menyelesaikan janji yang dikembalikan dari aksioma.

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

Emre Tapcı
sumber