菜鸟教程
教程 axios tutorial

响应拦截器的作用与用法

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

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

相关内容