# 全局错误提示封装

URL: https://caijiao.org/axios/response/global-error
Source: docs/axios/response/global-error.md
Description: 本章节讲解如何在 Axios 中封装全局错误提示，包括使用响应拦截器统一处理请求错误、网络异常或接口异常，并结合前端提示组件实现统一提示，提高用户体验与代码可维护性。

在大型项目中，为了减少重复错误处理代码，可以在 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. 优势

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

---

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