axios 请求拦截器和响应拦截器总结

原创已于 2025-03-19 18:12:37 修改 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js #服务器

于 2025-03-19 11:08:19 首次发布

请求拦截器 和 响应拦截器 是 axios 提供的强大功能，用于在请求发送前和响应返回后统一处理某些逻辑。它们的作用和具体用法如下：

1. 请求拦截器

作用

在请求发送之前，对请求配置进行统一处理。例如：

添加请求头（如 Authorization）。
修改请求参数。
显示加载状态。

用法

通过 axios.interceptors.request.use 方法注册请求拦截器。

示例

instance.interceptors.request.use(
  (config) => {
    // 在请求发送之前做一些处理
    const token = localStorage.getItem('token');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`; // 添加 token 到请求头
    }
    return config; // 返回处理后的配置
  },
  (error) => {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

场景

添加认证信息（如 token）。
统一添加请求头（如 Content-Type）。
在发送请求前显示加载动画。

2. 响应拦截器

作用

在响应返回之后，对响应数据进行统一处理。例如：

统一处理错误状态码。
提取响应数据。
隐藏加载状态。

用法

通过 axios.interceptors.response.use 方法注册响应拦截器。

示例

instance.interceptors.response.use(
  (response) => {
    // 对响应数据做些什么
    const { code, message, data } = response.data;
    if (code === 0) {
      return data; // 返回实际数据
    } else {
      ElMessage.error(message || '请求失败'); // 显示错误提示
      return Promise.reject(new Error(message || '请求失败')); // 抛出错误
    }
  },
  (error) => {
    // 对响应错误做些什么
    ElMessage.error(error.message || '网络错误'); // 显示网络错误提示
    return Promise.reject(error); // 抛出错误
  }
);

场景

统一处理后端返回的错误码。
提取响应中的实际数据。
在响应返回后隐藏加载动画。

完整示例

以下是一个完整的 request.ts 文件，包含请求拦截器和响应拦截器的实现：

import axios from 'axios';
import { ElMessage } from 'element-plus';

// 创建 axios 实例
const instance = axios.create({
  baseURL: import.meta.env.VITE_API_BASE_URL, // 基础 URL
  timeout: 10000, // 请求超时时间
});

// 请求拦截器
instance.interceptors.request.use(
  (config) => {
    // 在发送请求之前做些什么
    const token = localStorage.getItem('token');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`; // 添加 token 到请求头
    }
    return config; // 返回处理后的配置
  },
  (error) => {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

// 响应拦截器
instance.interceptors.response.use(
  (response) => {
    // 对响应数据做些什么
    const { code, message, data } = response.data;
    if (code === 0) {
      return data; // 返回实际数据
    } else {
      ElMessage.error(message || '请求失败'); // 显示错误提示
      return Promise.reject(new Error(message || '请求失败')); // 抛出错误
    }
  },
  (error) => {
    // 对响应错误做些什么
    ElMessage.error(error.message || '网络错误'); // 显示网络错误提示
    return Promise.reject(error); // 抛出错误
  }
);

// 封装常用请求方法
export const request = {
  get(url, params = {}) {
    return instance.get(url, { params });
  },
  post(url, data = {}) {
    return instance.post(url, data);
  },
  put(url, data = {}) {
    return instance.put(url, data);
  },
  delete(url, params = {}) {
    return instance.delete(url, { params });
  },
};

export default request;

使用示例

1. 发送 GET 请求

import { request } from '@/utils/request';

const fetchData = async () => {
  try {
    const data = await request.get('/api/data');
    console.log(data);
  } catch (error) {
    console.error('请求失败:', error);
  }
};

2. 发送 POST 请求

import { request } from '@/utils/request';

const submitForm = async () => {
  try {
    const response = await request.post('/api/submit', { name: 'John' });
    console.log(response);
  } catch (error) {
    console.error('提交失败:', error);
  }
};