Asynchrone/Wait-Methoden zur Fehlerbehandlung mit Axios in React
P粉186904731
P粉186904731 2023-08-26 10:41:39
0
1
543
<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>
P粉186904731
P粉186904731

Antworte allen(1)
P粉066224086

您可以在官方文档中查看如何处理错误:https://axios-http.com/docs/handling_errors

如果没有收到响应,则可以查看错误(从axios文档中复制)

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

您可以使用错误处理边界包装您的组件。您可以创建一个组件,它将包装发生错误的其他组件,并使用componentDidCatch生命周期方法,这与在try-catch中使用catch{}相同。https://reactjs.org/docs/react-component.html#componentdidcatch。或者使用一个流行的npm包https://www.npmjs.com/package/react-error-boundary

Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage