# 响应拦截器的作用与用法

URL: https://caijiao.org/axios/interceptors/response
Source: docs/axios/interceptors/response.md
Description: 本章节讲解 Axios 响应拦截器的作用与使用方法，包括统一处理接口返回数据、全局错误提示、日志记录和数据格式化，帮助开发者在前端项目中高效管理请求响应。

Axios 响应拦截器可以在接收到响应后，对响应数据进行统一处理。通过拦截器可以统一处理返回的数据结构、错误提示和日志记录，从而减少重复代码。

## 1. 添加响应拦截器

```javascript
import axios from "axios";
import { ElMessage } from "element-plus"; // 示例提示组件

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

instance.interceptors.response.use(
  (response) => {
    // 对响应数据进行处理，例如统一取 data
    return response.data;
  },
  (error) => {
    // 对响应错误进行处理
    if (error.response) {
      ElMessage.error(
        `请求失败：${error.response.status} ${error.response.statusText}`
      );
    } else if (error.request) {
      ElMessage.error("无响应，请检查网络或接口状态");
    } else {
      ElMessage.error(`请求错误：${error.message}`);
    }
    return Promise.reject(error);
  }
);
```

## 2. 响应拦截器应用场景

- **统一取 data**：减少每个请求重复 `.then(res => res.data)`；
- **全局错误提示**：统一处理 HTTP 错误或网络异常；
- **数据格式化**：可在拦截器中对返回数据做转换或筛选；
- **日志记录**：对接口调用进行统一日志记录。

## 3. 使用示例

```javascript
instance
  .get("/users/123")
  .then((user) => console.log("用户信息：", user))
  .catch((err) => console.error("请求异常：", err));
```

---

> 💡 小提示：响应拦截器能够让前端请求逻辑更简洁，同时在项目中统一处理错误和数据格式，提高可维护性和用户体验。