Asynchrone/Wait-Methoden zur Fehlerbehandlung mit Axios in React

Question

Ich verwende Axios, um einige Daten abzurufen:

export const getProducts = async () =>
   versuchen {
       const { data } = waiting axios.get(`/api/products`)
       Daten zurückgeben
   } Catch (Err) {
       console.log(fehler)
       Fehler zurückgeben
   }
}

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:

1. AxiosError {Nachricht: 'Anfrage fehlgeschlagen mit Statuscode 404', Name: 'AxiosError', Code: 'ERR_BAD_REQUEST', Konfiguration: {…}, Anfrage: XMLHttpRequest,...}
2. Code: "ERR_BAD_REQUEST"
3. Konfiguration: {transition: {…}, Adapter: array(2), transformRequest: array(1), transformResponse: array(1), Timeout: 0, …}
4. Nachricht: „Anfrage fehlgeschlagen mit Statuscode 404“
5. Name: „AxiosError“
6. Anfrage: XMLHttpRequest {onreadystatechange: null, readyState: 4, Timeout: 0, withCredentials: false, Upload: XMLHttpRequestUpload, …}
7. Antwort: {data: 'nnnkann nicht abgerufen werden /api/productsnnn', Status: 404, StatusText: 'Nein Gefunden ', Header: AxiosHeaders, Konfiguration: {...},...}
8. 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)"
9. [[Prototyp]]: Fehler

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.

Ich rufe meine Funktion so auf:

const productsArr = waiting getProducts()

Wie kann ich feststellen, ob productsArr ein gültiges Array von Produkten oder ein AxiosError ist?

Answer 1

您可以在官方文档中查看如何处理错误：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