React中Axios拦截器报request is not a function错误解决方案

触发报错 #

运行代码时抛出如下类型错误：

TypeError: constants_api_constants__WEBPACK_IMPORTED_MODULE_1.default.interceptors.request is not a function

核心问题排查 #

• 语法错误：const options.GET_ALL_STUDENTS = {}属于非法声明，const关键字后必须跟合法变量名，不能直接写属性访问表达式，该问题会导致模块编译、导入异常，和webpack报错信息对应。
• 用法错误：对Axios拦截器的API理解完全偏差。api.interceptors.request不是发起请求的方法，它仅提供use接口用于注册请求前置钩子，不支持传入请求配置直接调用，你写的api.interceptors.request(options.GET_ALL_STUDENTS)属于非法调用，必然抛出类型错误。
• 逻辑错误：拦截器是实例级的全局钩子，只需要在Axios实例初始化完成后注册一次即可，写在单次请求函数里会导致每次调用请求都重复注册拦截器，引发内存泄漏、逻辑重复执行问题。
• 导入校验：如果修正上述问题后仍报错，检查对应常量文件的导出逻辑，确认你导入的api变量是axios.create()生成的实例，而非普通JS配置对象。

可直接运行的修复代码 #

1. 修正常量声明、Axios实例初始化与拦截器注册逻辑，拦截器只注册一次：

// 修正非法的常量声明
const REQUEST_OPTIONS = {
  GET_ALL_STUDENTS: {
    method: "GET",
    url: "/Student",
  }
}
const BASE_API_URL = "https://localhost:7072/api";
const api = axios.create({
  baseURL: BASE_API_URL,
});

// 拦截器在实例创建后全局注册一次即可，不要放在请求函数内
api.interceptors.request.use(
  function (config) {
    // 可在此处添加统一逻辑：如注入token、修改请求头、添加签名等
    return config;
  },
  function (error) {
    return Promise.reject(error);
  }
);

// 响应拦截器按需注册
api.interceptors.response.use(
  function (response) {
    // 可在此处统一处理响应格式、错误码
    return response;
  },
  function (error) {
    return Promise.reject(error);
  }
)

2. 修正请求函数逻辑，用Axios实例发起请求而非调用拦截器：

const getStudents = () => {
  // 直接调用实例传入配置即可发起请求
  return api(REQUEST_OPTIONS.GET_ALL_STUDENTS);
};

3. 原有redux-saga的请求处理逻辑无需修改，保持原有写法即可正常运行：

function* fetchStudents() {
  try {
    const result1 = yield call(getStudents);
    const studentList = createStudentListAdapter(result1.data);
    yield put(fetchStudentsSuccess(studentList));
  } catch (error) {
    yield put(fetchStudentsFailure());
  }
}

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