Kaedah tak segerak/menunggu untuk pengendalian ralat menggunakan Axios dalam React

Question

Saya menggunakan Axios untuk mendapatkan beberapa data:

export const getProducts = async () =>
   cuba {
       const { data } = tunggu axios.get(`/api/products`)
       mengembalikan data
   } tangkap (err) {
       console.log(err)
       kembali err
   }
}

Semuanya baik, tetapi saya perlu menangkap ralat http di dalam blok percubaan. Contohnya, apabila sambungan ke pelayan terputus, Axios mengembalikan objek AxiosError:

1. AxiosError {message: 'Permintaan gagal dengan kod status 404', nama: 'AxiosError', kod: 'ERR_BAD_REQUEST', konfigurasi: {…}, permintaan: XMLHttpRequest,...}
2. Kod: "ERR_BAD_REQUEST"
3. Konfigurasi: {transition: {…}, adapter: array(2), transformRequest: array(1), transformResponse: array(1), tamat masa: 0, …}
4. Mesej: "Permintaan gagal dengan kod status 404"
5. Nama: "AxiosError"
6. Permintaan: XMLHttpRequest {onreadystatechange: null, readyState: 4, tamat masa: 0, withCredentials: false, muat naik: XMLHttpRequestUpload, …}
7. Respons: {data: 'nnnnot be retrieved /api/productsnnn', status: 404, statusTeks: 'No Ditemui ', Pengepala: AxiosHeaders, Konfigurasi: {...},...}
8. Timbunan: "AxiosError: Permintaan gagal dengan kod status 404n semasa menyelesaikan (webpack-internal:///./node_modules/axios/lib/core/settle.js:24:12)n dalam XMLHttpRequest.onloadend (webpack-internal:///./node_modules/axios/lib/adapters/xhr.js:117:66)"
9. [[Prototaip]]: Ralat

Masalahnya ialah: jika terdapat ralat, saya ingin memaparkan div yang mengatakan "Ralat berlaku semasa mendapatkan data." Jika tiada ralat, jadikan jadual produk dengan cara biasa.

Saya memanggil fungsi saya seperti ini:

const productsArr = tunggu getProducts()

Bagaimanakah saya boleh mengetahui sama ada productsArr ialah susunan produk yang sah atau AxiosError?

Answer 1

Anda boleh melihat cara mengendalikan ralat dalam dokumentasi rasmi: https://axios-http.com/docs/handling_errors

Jika tiada respons diterima, anda boleh melihat ralat (disalin daripada dokumentasi axios)

else if (error.request) {
      // 发送请求但未收到响应
      // `error.request` 在浏览器中是XMLHttpRequest的实例，在node.js中是http.ClientRequest的实例
      console.log(error.request);

Anda boleh membalut komponen anda dengan sempadan pengendalian ralat. Anda boleh mencipta komponen yang akan membalut komponen lain di mana ralat berlaku dan menggunakan componentDidCatch生命周期方法，这与在try-catch中使用catch{} untuk perkara yang sama. https://reactjs.org/docs/react-component.html#componentdidcatch. Atau gunakan pakej npm yang popular https://www.npmjs.com/package/react-error-boundary