cari

Rumah  >  Soal Jawab  >  teks badan

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

<p>Saya menggunakan Axios untuk mendapatkan beberapa data: </p> <pre class="brush:php;toolbar:false;">export const getProducts = async () => cuba { const { data } = tunggu axios.get(`/api/products`) mengembalikan data } tangkap (err) { console.log(err) kembali err } }</pre> <p>Semuanya baik, tetapi saya perlu menangkap ralat http di dalam blok percubaan. Contohnya, apabila sambungan ke pelayan terputus, Axios mengembalikan objek AxiosError: </p> <blockquote> <ol> <li>AxiosError {message: 'Permintaan gagal dengan kod status 404', nama: 'AxiosError', kod: 'ERR_BAD_REQUEST', konfigurasi: {…}, permintaan: XMLHttpRequest,...}</li> <li>Kod: "ERR_BAD_REQUEST"</li> <li>Konfigurasi: {transition: {…}, adapter: array(2), transformRequest: array(1), transformResponse: array(1), tamat masa: 0, …}</li> <li>Mesej: "Permintaan gagal dengan kod status 404"</li> <li>Nama: "AxiosError"</li> <li>Permintaan: XMLHttpRequest {onreadystatechange: null, readyState: 4, tamat masa: 0, withCredentials: false, muat naik: XMLHttpRequestUpload, …}</li> <li>Respons: {data: 'nnn<metacharacters...re>not be retrieved /api/productsnnn', status: 404, statusTeks: 'No Ditemui ', Pengepala: AxiosHeaders, Konfigurasi: {...},...}</li> <li>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)"</li> <li>[[Prototaip]]: Ralat</li> </ol> </blockquote> <p>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. </p> <p>Saya memanggil fungsi saya seperti ini: </p> <pre class="brush:php;toolbar:false;">const productsArr = tunggu getProducts()</pre> <p>Bagaimanakah saya boleh mengetahui sama ada productsArr ialah susunan produk yang sah atau AxiosError? </p>
P粉186904731P粉186904731550 hari yang lalu598

membalas semua(1)saya akan balas

  • P粉066224086

    P粉0662240862023-08-27 09:21:06

    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

    balas
    0
  • Batalbalas