Asynchrone/Wait-Methoden zur Fehlerbehandlung mit Axios in React
<p>Ich verwende Axios, um einige Daten abzurufen: </p>
<pre class="brush:php;toolbar:false;">export const getProducts = async () =>
versuchen {
const { data } = waiting axios.get(`/api/products`)
Daten zurückgeben
} Catch (Err) {
console.log(fehler)
Fehler zurückgeben
}
}</pre>
<p>Alles ist in Ordnung, aber ich muss HTTP-Fehler in einem Try-Block abfangen. Wenn beispielsweise die Verbindung zum Server verloren geht, gibt Axios ein AxiosError-Objekt zurück: </p>
<blockquote>
<ol>
<li>AxiosError {Nachricht: 'Anfrage fehlgeschlagen mit Statuscode 404', Name: 'AxiosError', Code: 'ERR_BAD_REQUEST', Konfiguration: {…}, Anfrage:
XMLHttpRequest,...}</li>
<li>Code: "ERR_BAD_REQUEST"</li>
<li>Konfiguration: {transition: {…}, Adapter: array(2), transformRequest: array(1), transformResponse: array(1), Timeout: 0,
…}</li>
<li>Nachricht: „Anfrage fehlgeschlagen mit Statuscode 404“</li>
<li>Name: „AxiosError“</li>
<li>Anfrage: XMLHttpRequest {onreadystatechange: null, readyState: 4, Timeout: 0, withCredentials: false, Upload: XMLHttpRequestUpload,
…}</li>
<li>Antwort: {data: 'nnn<metacharacters...re>kann nicht abgerufen werden
/api/productsnnn', Status: 404, StatusText: 'Nein
Gefunden ', Header: AxiosHeaders, Konfiguration: {...},...}</li>
<li>Stack: „AxiosError: Die Anfrage ist beim Auflösen mit dem Statuscode 404n fehlgeschlagen
(webpack-internal:///./node_modules/axios/lib/core/settle.js:24:12)n
in XMLHttpRequest.onloadend
(webpack-internal:///./node_modules/axios/lib/adapters/xhr.js:117:66)"</li>
<li>[[Prototyp]]: Fehler</li>
</ol>
</blockquote>
<p>Das Problem ist: Wenn ein Fehler auftritt, möchte ich ein Div rendern, das besagt: „Beim Abrufen der Daten ist ein Fehler aufgetreten.“ Wenn keine Fehler vorliegen, rendern Sie eine Produkttabelle auf die übliche Weise. </p>
<p>Ich rufe meine Funktion so auf: </p>
<pre class="brush:php;toolbar:false;">const productsArr = waiting getProducts()</pre>
<p>Wie kann ich feststellen, ob productsArr ein gültiges Array von Produkten oder ein AxiosError ist? </p>
