React中使用Axios進行錯誤處理的非同步/等待方法

Question

我正在使用Axios來獲取一些數據：

export const getProducts = async () => {
   try {
       const { data } = await axios.get(`/api/products`)
       return data
   } catch (err) {
       console.log(err)
       return err
   }
}

一切都很好，但是我需要在try區塊內捕獲http錯誤。例如，當與伺服器的連線遺失時，Axios會傳回一個AxiosError物件：

1. AxiosError {message: '請求失敗，狀態代碼 404', name: 'AxiosError', code: 'ERR_BAD_REQUEST', config: {…}, request: XMLHttpRequest，...}
2. 代碼：「ERR_BAD_REQUEST」
3. 配置：{過渡：{…}，適配器：數組（2），transformRequest：數組（1），transformResponse：數組（1），超時：0， …}
4. 訊息：「請求失敗，狀態碼為 404」
5. 名稱：「AxiosError」
6. 請求：XMLHttpRequest {onreadystatechange：null，readyState：4，逾時：0，withCredentials：false，上傳：XMLHttpRequestUpload， …}
7. 回應：{資料：'nnn<元字元...re>無法取得 /api/productsnnn'，狀態：404，statusText：'不 找到'，標頭：AxiosHeaders，配置：{...}，...}
8. 堆疊：「AxiosError：請求失敗，狀態碼為 404n 解決時 (webpack-internal:///./node_modules/axios/lib/core/settle.js:24:12)n 在 XMLHttpRequest.onloadend (webpack-internal:///./node_modules/axios/lib/adapters/xhr.js:117:66)"
9. [[原型]]：錯誤

問題是：如果有錯誤，我想渲染一個顯示「取得資料時發生錯誤」的div。如果沒有錯誤，請按照通常的方式渲染一個產品表格。

我這樣呼叫我的函數：

const productsArr = await getProducts()

我該如何判斷productsArr是有效的產品陣列還是AxiosError？

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

#