后端离线时，如何在React的Axios拦截器中模拟数据？

你的核心问题在于错误地在请求拦截器中返回了模拟响应——请求拦截器的作用是修改请求配置，而非直接返回响应。axios会把你返回的模拟响应对象当作请求配置继续发送请求，所以仍然会和后端通信。

正确解决方案：自定义Axios Adapter #

Adapter是axios发送请求的底层实现，通过自定义Adapter可以直接拦截指定接口，返回Mock数据且不发送真实请求，是最可靠的方式：

import apiFriends from './mockedData/friends';
import axios from 'axios';

const zpiApi = axios.create({
  baseURL: API_BASE_URL,
  timeout: 10 * 1000,
});

// 保存默认的原生请求适配器
const defaultAdapter = zpiApi.defaults.adapter;

// 替换为自定义适配器
zpiApi.defaults.adapter = async (config) => {
  // 匹配需要Mock的接口路径
  if (config.url?.includes('/friends/search/')) {
    // 返回符合Axios响应格式的Mock数据，可添加延迟模拟网络请求
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve({
          data: apiFriends,
          status: 200,
          statusText: 'OK',
          headers: {},
          config: config,
          request: {}
        });
      }, 300);
    });
  }
  // 其他接口使用默认适配器发送真实请求
  return defaultAdapter(config);
};

// 保留原有的请求拦截器（处理Token逻辑）
zpiApi.interceptors.request.use((request) => {
  const token = localStorage.getItem('token');
  if (token) {
    request.headers.Authorization = `Bearer ${token}`;
  }
  return request;
});

export default zpiApi;

备选方案：请求拦截器中取消请求并返回Mock响应 #

如果你不想修改Adapter，也可以在请求拦截器中取消原请求，直接返回包含Mock响应的Promise：

import apiFriends from './mockedData/friends';
import axios from 'axios';

const zpiApi = axios.create({
  baseURL: API_BASE_URL,
  timeout: 10 * 1000,
});

zpiApi.interceptors.request.use((request) => {
  const token = localStorage.getItem('token');
  if (token) {
    request.headers.Authorization = `Bearer ${token}`;
  }

  if (request.url?.includes('/friends/search/')) {
    // 创建取消令牌终止原请求
    const source = axios.CancelToken.source();
    request.cancelToken = source.token;
    source.cancel('Mock数据拦截');
    
    // 返回Mock响应的Promise
    return Promise.resolve({
      data: apiFriends,
      status: 200,
      statusText: 'OK',
      headers: request.headers,
      config: request
    });
  }

  return request;
});

export default zpiApi;

为什么你之前的方法失效？ #

1. 请求拦截器的返回值要求：请求拦截器必须返回请求配置对象，你返回的模拟响应会被当作请求配置，axios会基于它继续发送请求到后端。
2. 移除...request的报错原因：丢失了请求配置中的核心属性（如method），axios在处理请求时尝试调用method.toUpperCase()，但method为undefined，因此抛出错误。

内容的提问来源于stack exchange，提问作者March3wa