菜鸟教程
教程 axios tutorial

全局错误提示封装

在大型项目中，为了减少重复错误处理代码，可以在 Axios 中封装全局错误提示，实现统一的异常处理机制。

1. 使用响应拦截器统一处理

javascript 
import axios from "axios";
import { ElMessage } from "element-plus"; // 示例使用 Element Plus 提示组件

// 创建 Axios 实例
const instance = axios.create({
  baseURL: "https://api.example.com",
  timeout: 7000,
});

// 响应拦截器
instance.interceptors.response.use(
  (response) => response,
  (error) => {
    if (error.response) {
      // 服务器返回状态码非 2xx
      ElMessage.error(
        `请求失败：${error.response.status} ${error.response.statusText}`
      );
    } else if (error.request) {
      // 请求已发出但未收到响应
      ElMessage.error("网络错误或请求超时，请稍后重试");
    } else {
      // 其他错误
      ElMessage.error(`请求错误：${error.message}`);
    }
    return Promise.reject(error);
  }
);

export default instance;

2. 使用示例

javascript 
instance
  .get("/users/123")
  .then((res) => console.log("用户数据：", res.data))
  .catch((err) => console.log("请求被全局拦截处理"));

3. 优势

  • 减少每个请求重复编写错误处理逻辑；
  • 可统一管理提示风格和内容；
  • 易于维护和扩展，例如添加日志上报或自定义提示组件。

💡 小提示：全局错误提示封装是大型前端项目的常用实践，可以确保接口请求失败时，用户能够得到及时友好的反馈，并降低重复代码量。

相关内容