Asynchronous/await methods for error handling using Axios in React

Question

I'm using Axios to get some data:

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

Everything is fine, but I need to catch http errors inside a try block. For example, when the connection to the server is lost, Axios returns an AxiosError object:

1. AxiosError {message: 'Request failed with status code 404', name: 'AxiosError', code: 'ERR_BAD_REQUEST', config: {…}, request: XMLHttpRequest,...}
2. Code: "ERR_BAD_REQUEST"
3. Configuration: {transition: {…}, adapter: array(2), transformRequest: array(1), transformResponse: array(1), timeout: 0, …}
4. Message: "Request failed with status code 404"
5. Name: "AxiosError"
6. Request: XMLHttpRequest {onreadystatechange: null, readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, …}
7. Response: {data: 'nnncannot be retrieved /api/productsnnn', status: 404, statusText: 'No Found ', Headers: AxiosHeaders, Configuration: {...},...}
8. Stack: "AxiosError: Request failed with status code 404n while resolving (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. [[Prototype]]: Error

The problem is: if there is an error, I want to render a div that says "An error occurred while getting data". If there are no errors, render a product table in the usual way.

I call my function like this:

const productsArr = await getProducts()

How do I tell if productsArr is a valid array of products or an AxiosError?

Answer 1

You can see how to handle errors in the official documentation: https://axios-http.com/docs/handling_errors

If no response is received, you can view the error (copied from axios documentation)

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

You can wrap your component with error handling boundaries. You can create a component that will wrap other components where the error occurs and use the componentDidCatch lifecycle methods, which is the same as using catch{} in a try-catch. https://reactjs.org/docs/react-component.html#componentdidcatch. Or use a popular npm packagehttps://www.npmjs.com/package/react-error-boundary