菜鸟教程
教程 axios tutorial

错误处理与异常捕获

在使用 Axios 时，网络请求可能出现失败或异常情况，需要进行统一处理以提升用户体验和系统健壮性。

1. 使用 try/catch 捕获异常（async/await）

javascript 
import axios from "axios";

async function fetchData() {
  try {
    const response = await axios.get("https://api.example.com/data");
    console.log("数据：", response.data);
  } catch (error) {
    console.error("请求出错：", error);
  }
}

fetchData();

2. 使用 then/catch 处理错误

javascript 
axios
  .get("https://api.example.com/data")
  .then((res) => console.log("数据：", res.data))
  .catch((err) => console.error("请求失败：", err));

3. 判断错误类型

Axios 的错误对象包含多个属性，可以区分不同类型：

javascript 
axios.get("https://api.example.com/data").catch((error) => {
  if (error.response) {
    // 请求已发出，服务器返回状态码不在 2xx
    console.error("响应错误，状态码：", error.response.status);
  } else if (error.request) {
    // 请求已发出，但未收到响应
    console.error("无响应，可能网络错误或请求超时");
  } else {
    // 其他错误
    console.error("请求配置错误：", error.message);
  }
});

4. 设置全局错误处理

javascript 
axios.interceptors.response.use(
  (response) => response,
  (error) => {
    console.error("全局错误处理：", error.message);
    return Promise.reject(error); // 保持链式调用可捕获错误
  }
);

💡 小提示：合理处理错误与异常捕获，不仅能提升前端稳定性，还能为用户提供友好的提示信息，确保请求失败时业务逻辑不会中断。

相关内容