Axios拦截器

Techlifehacks

已于 2025-04-11 15:05:31 修改

阅读量365

点赞数 4

文章标签：前端

于 2025-04-11 15:04:10 首次发布

本文链接：https://blog.csdn.net/Techlifehacks/article/details/147144432

版权

在前端开发中，与后端API交互是日常工作中不可或缺的一部分。无论是处理认证、统一错误提示，还是记录请求日志，这些重复性任务往往会让代码变得臃肿且难以维护。今天，我将分享一个提升API请求处理效率的神器——Axios拦截器。

1. 什么是Axios拦截器？

Axios是一个基于Promise的HTTP客户端，广泛用于Vue和React项目中。拦截器是Axios的核心功能之一，它允许我们在请求发送前和响应返回后插入自定义逻辑。换句话说，拦截器就像一个守门员，所有进出的请求和响应都必须经过它。

拦截器的两大核心功能：

请求拦截器：在请求发送到服务器之前修改请求配置。
响应拦截器：在响应返回客户端之前处理数据或错误。

2. 场景一：全局添加认证Token

在需要用户登录的系统中，几乎每个API请求都需要携带认证Token。手动在每个请求中添加Token显然低效且容易出错。通过拦截器，我们可以实现自动添加Token：

JavaScript

复制

import axios from 'axios';

// 创建Axios实例
const api = axios.create({
  baseURL: 'https://api.example.com'
});

// 请求拦截器：自动添加Token
api.interceptors.request.use(config => {
  const token = localStorage.getItem('userToken');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

export default api;

现在，所有通过api实例发送的请求都会自动携带认证信息，无需重复代码。

3. 场景二：统一处理HTTP错误

API请求失败时，错误处理逻辑通常分散在各个地方。通过响应拦截器，我们可以集中处理错误：

JavaScript

复制

// 响应拦截器：统一错误处理
api.interceptors.response.use(
  response => response,  // 成功时直接返回
  error => {
    const { status } = error.response;
    if (status === 401) {
      // 未认证，跳转到登录页
      window.location.href = '/login';
    } else if (status === 403) {
      // 权限不足，提示用户
      alert('您没有权限访问此资源');
    } else if (status === 500) {
      // 服务器错误，记录日志
      console.error('服务器错误:', error.response.data);
    }
    return Promise.reject(error);
  }
);

这种集中式错误处理不仅减少了重复代码，还让错误逻辑更加清晰。

4. 场景三：加载状态管理

在发送请求时显示加载动画，在请求完成或失败时隐藏加载动画，是提升用户体验的常见需求。通过拦截器，我们可以轻松实现这一点：

JavaScript

复制

// 全局状态管理
let pendingRequests = 0;

// 请求拦截器：显示加载状态
api.interceptors.request.use(config => {
  pendingRequests++;
  if (pendingRequests === 1) {
    showLoading();  // 显示加载动画
  }
  return config;
});

// 响应拦截器：隐藏加载状态
api.interceptors.response.use(
  response => {
    pendingRequests--;
    if (pendingRequests === 0) {
      hideLoading();  // 隐藏加载动画
    }
    return response;
  },
  error => {
    pendingRequests--;
    if (pendingRequests === 0) {
      hideLoading();
    }
    return Promise.reject(error);
  }
);

通过计数器pendingRequests，我们能准确控制加载动画的显示和隐藏，避免动画闪烁问题。

5. 场景四：API请求日志记录

在开发和调试阶段，记录API请求和响应数据是排查问题的重要手段。拦截器可以帮助我们快速实现日志记录：

JavaScript

复制

// 请求拦截器：记录请求信息
api.interceptors.request.use(config => {
  console.log('🚀 请求发送:', {
    url: config.url,
    method: config.method,
    headers: config.headers,
    data: config.data
  });
  return config;
});

// 响应拦截器：记录响应信息
api.interceptors.response.use(
  response => {
    console.log('✅ 响应成功:', {
      status: response.status,
      data: response.data
    });
    return response;
  },
  error => {
    console.error('❌ 请求失败:', {
      status: error.response?.status,
      message: error.message
    });
    return Promise.reject(error);
  }
);

这种日志记录方式特别适合团队协作，能快速定位问题。