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