使用 Axios 处理 AxiosError 的三种常见方法

在使用 Axios 时处理 AxiosError 有几种常见的方法:

  1. 使用 try-catch 语句捕获异常:
javascript 复制代码
try {
  const response = await axios.get('/api/data');
  // 处理响应数据
} catch (error) {
  if (error.response) {
    // 请求成功但状态码不在 2xx 范围
    console.log(error.response.data);
    console.log(error.response.status);
    console.log(error.response.headers);
  } else if (error.request) {
    // 请求发出但没有收到响应
    console.log(error.request);
  } else {
    // 在设置请求时发生了错误
    console.log('Error', error.message);
  }
}
  1. 使用 Axios 实例的 interceptors 拦截器:
javascript 复制代码
const instance = axios.create();

instance.interceptors.response.use(
  (response) => {
    // 处理成功响应
    return response;
  },
  (error) => {
    // 处理错误响应
    if (error.response) {
      // 请求成功但状态码不在 2xx 范围
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
    } else if (error.request) {
      // 请求发出但没有收到响应
      console.log(error.request);
    } else {
      // 在设置请求时发生了错误
      console.log('Error', error.message);
    }
    return Promise.reject(error);
  }
);
  1. 使用 axios.isAxiosError() 判断错误是否来自 Axios:
javascript 复制代码
axios.get('/api/data')
  .then((response) => {
    // 处理响应数据
  })
  .catch((error) => {
    if (axios.isAxiosError(error)) {
      // 处理 AxiosError
      if (error.response) {
        // 请求成功但状态码不在 2xx 范围
        console.log(error.response.data);
        console.log(error.response.status);
        console.log(error.response.headers);
      } else if (error.request) {
        // 请求发出但没有收到响应
        console.log(error.request);
      } else {
        // 在设置请求时发生了错误
        console.log('Error', error.message);
      }
    } else {
      // 处理其他类型的错误
      console.log('Error', error);
    }
  });
相关推荐
霍先生的虚拟宇宙网络5 分钟前
webp 网页如何录屏?
开发语言·前端·javascript
jessezappy25 分钟前
jQuery-Word-Export 使用记录及完整修正文件下载 jquery.wordexport.js
前端·word·jquery·filesaver·word-export
旧林8431 小时前
第八章 利用CSS制作导航菜单
前端·css
yngsqq1 小时前
c#使用高版本8.0步骤
java·前端·c#
Myli_ing2 小时前
考研倒计时-配色+1
前端·javascript·考研
余道各努力,千里自同风2 小时前
前端 vue 如何区分开发环境
前端·javascript·vue.js
软件小伟2 小时前
Vue3+element-plus 实现中英文切换(Vue-i18n组件的使用)
前端·javascript·vue.js
醉の虾2 小时前
Vue3 使用v-for 渲染列表数据后更新
前端·javascript·vue.js
张小小大智慧2 小时前
TypeScript 的发展与基本语法
前端·javascript·typescript
hummhumm2 小时前
第 22 章 - Go语言 测试与基准测试
java·大数据·开发语言·前端·python·golang·log4j