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

山川湖海

已于 2024-04-21 17:25:45 修改

阅读量7.6k

点赞数 1

分类专栏： JavaScript 文章标签：前端 axios拦截器 AxiosError

于 2024-04-11 13:48:09 首次发布

本文链接：https://blog.csdn.net/sky6862/article/details/137636514

版权

JavaScript 专栏收录该内容

15 篇文章

订阅专栏

本文介绍了在使用Axios进行HTTP请求时，如何通过try-catch语句、interceptors拦截器以及axios.isAxiosError方法来有效地捕获和处理各种类型的错误，包括响应状态码异常、请求失败和设置请求错误。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述
在使用 Axios 时处理 AxiosError 有几种常见的方法:

使用 try-catch 语句捕获异常:

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);
  }
}

使用 Axios 实例的 interceptors 拦截器:

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);
  }
);

使用 axios.isAxiosError() 判断错误是否来自 Axios:

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);
    }
  });