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？