React中使用Axios进行错误处理的异步/等待方法-PHP中文网问答

我正在使用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对象：

AxiosError {message: '请求失败，状态代码 404', name: 'AxiosError', code: 'ERR_BAD_REQUEST', config: {…}, request: XMLHttpRequest，...}

代码：“ERR_BAD_REQUEST”

配置：{过渡：{…}，适配器：数组（2），transformRequest：数组（1），transformResponse：数组（1），超时：0， …}

消息：“请求失败，状态代码为 404”

名称：“AxiosError”

请求：XMLHttpRequest {onreadystatechange：null，readyState：4，超时：0，withCredentials：false，上传：XMLHttpRequestUpload， …}

响应：{数据：'nnn<元字符...re>无法获取 /api/productsnnn'，状态：404，statusText：'不找到'，标头：AxiosHeaders，配置：{...}，...}

堆栈：“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)"

[[原型]]：错误

问题是：如果有错误，我想渲染一个显示“获取数据时发生错误”的div。如果没有错误，按照通常的方式渲染一个产品表格。

我这样调用我的函数：

const productsArr = await getProducts()

我如何判断productsArr是一个有效的产品数组还是一个AxiosError？

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

全部回复(1)

P粉0662240862023-08-27 09:21:06 1楼

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

如果没有收到响应，则可以查看错误（从axios文档中复制）

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

赞 +0

添加回复