Reactjs 无法使axiosmockadapter正常工作

按照您所做的，您每次都会创建一个新的AXIOS实例，您需要创建一个实例，对其应用模拟，然后使用相同的实例.此外，您还需要指定路由或使用mock.onAny，例如:

https://codesandbox.io/s/old-microservice-4gxxl4?file=/lib/axios.js个

mock.js个

import MockAdapter from "axios-mock-adapter";

export default function applyMockAdapter(axiosInstance) {
    const mock = new MockAdapter(axiosInstance);

    mock.onPost('/api/payments').reply(200, {
        status: "api/payments OK! ?"
    })

    mock.onAny().reply(200, {
        status: "Any other call will get this ?",
        moreData: [1, 3, 4, 5,]
    })
}

axios.js个

import axios from "axios";
import applyMockAdapter from "./mock";

const axiosInstance = axios.create({
    baseURL: "http://localhost:3000",
});

const someConfigToUseMock = true;

if (someConfigToUseMock) {
    applyMockAdapter(axiosInstance);
}

export default axiosInstance;

page.js个

"use client";
import axiosInstance from '@/lib/axios'; //? different name to avoid wrong import

export default function Home() {
  async function sendPayment() {
    const response = await axiosInstance //? different name to avoid wrong import
      .post("/api/payments")
      .then((response) => {
        return response;
      })
      .catch((error) => {
        return error;
      });
    return response;
  }

  return (
    <button onClick={() => {
      sendPayment().then(console.log);
    }} >Make Request</button>
  )
}

If you need to use a function you need the fuction to always return the same instance like this:个

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

const axiosInstance = axios.create({
    baseURL: "http://localhost:3000",
  });

export function createAxiosInstace() {
 return axiosInstance;
}

const mock = new MockAdapter(createAxiosInstace());
export default mock;