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>