Next.js13环境下axios-mock-adapter无法正常Mock接口求助

在Next.js 13环境下，使用axios和axios-mock-adapter模拟后端接口（非单元测试场景）时，调用接口出现404错误，核心原因是Mock适配器绑定的Axios实例和业务代码调用的不是同一个实例，以下是具体修复步骤：

错误原因分析 #

原代码中，每次调用createAxiosInstace()都会生成新的Axios实例，而Mock适配器只绑定了初始化时创建的那个实例，业务代码里的新实例并没有被Mock拦截，因此请求会直接发往真实后端导致404。

修复步骤 #

1. 改造Axios实例与Mock初始化代码 #

确保全局只有一个Axios实例，并且Mock适配器绑定到这个实例上：

import axios from "axios";
import MockAdapter from "axios-mock-adapter";

// 创建唯一的Axios实例
const axiosInstance = axios.create({
  baseURL: "http://localhost:3000",
});

// 给该实例绑定Mock适配器
const mock = new MockAdapter(axiosInstance);

// 导出实例和Mock对象
export { axiosInstance, mock };

2. 调整支付接口Mock配置 #

保持Mock逻辑不变，修改导入路径为新导出的mock对象：

import { mock } from "../axiosMock";

mock.onPost("/api/payments").reply(() => {
  const paymentStatus = {
    id: "5e8891ab188cd28",
    status: "approved",
    email: "jane@test.com",
    name: "Jane Doe",
  };
  return [200, { paymentStatus }];
});

3. 业务函数使用绑定Mock的实例 #

不再创建新实例，直接复用已绑定Mock的全局实例：

import { axiosInstance } from "@/lib/axiosMock";

export async function sendPayment() {
  try {
    const response = await axiosInstance.post("/api/payments");
    return response;
  } catch (error) {
    return error;
  }
}

额外注意事项 #

• 确保Mock配置文件在应用启动时被加载（比如在app/layout.tsx或入口文件中导入一次），否则Mock规则不会生效。
• Next.js 13 App Router环境中，注意组件/函数的渲染顺序，保证Mock在接口调用前完成初始化。

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