React中Axios Async/Await错误处理：区分返回值是数据还是AxiosError

问题背景 #

我用Axios编写了获取产品数据的函数：

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

调用方式为：

const productsArr = await getProducts()

现在需要判断productsArr是有效的产品数组，还是请求失败时返回的AxiosError对象，以此决定渲染产品表格或“获取数据时出错”的提示。

解决方案 #

方法1：通过instanceof判断类型

AxiosError是Axios暴露的错误类，可直接用instanceof做类型检查：

const productsArr = await getProducts()
if (productsArr instanceof AxiosError) {
  // 渲染错误提示div
} else {
  // 渲染产品表格
}

注：TypeScript环境需确保已导入AxiosError类型；纯JS环境可直接使用，Axios会全局暴露或通过模块导入该类。

方法2：检查错误对象的特征属性

若不想依赖instanceof，可通过AxiosError特有的属性判断：

const productsArr = await getProducts()
// 检查Axios自带的标记属性
if (productsArr.isAxiosError) {
  // 处理错误
}
// 或检查name属性
if (productsArr.name === 'AxiosError') {
  // 处理错误
}
// 或检查Axios专属错误码
if (productsArr.code?.startsWith('ERR_')) {
  // 处理错误
}

更优写法：统一返回格式或抛出错误

原函数在catch中返回错误的设计，会让调用方需要区分返回值类型，更合理的做法是：

方案A：抛出错误，调用方用try/catch处理

export const getProducts = async () => {
  try {
    const { data } = await axios.get(`/api/products`)
    return data
  } catch (err) {
    console.log(err)
    // 重新抛出错误，交由调用方处理
    throw err
  }
}

// 调用时
try {
  const productsArr = await getProducts()
  // 渲染产品表格
} catch (err) {
  // 渲染错误提示
}

方案B：返回包含状态的统一格式对象

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

// 调用时
const result = await getProducts()
if (result.success) {
  // 渲染产品表格（使用result.data）
} else {
  // 渲染错误提示
}

内容的提问来源于stack exchange，提问作者FrankS94