axios 得到 404 因为 axios 模拟适配器

Question

我购买了带有 axios-mock-adapter 的 Metronic React 模板。我仍然需要模拟请求进行身份验证，但是当我使用 Axios 获取公共 API 时，Axios.get() 返回 404 或未定义（请参阅下面的我的 redux 模块）。

redux 模块

import { createSlice } from "@reduxjs/toolkit";
import axios from "axios";
import { API_URL } from "../../support/api";

const initialState = {
  listLoading: false,
  actionsLoading: false,
  totalCount: 0,
  entities: null,
  equipmentForEdit: undefined,
  error: null,
};

const { actions, reducer } = createSlice({
  name: "ref_equipment",
  initialState,
  reducers: {
    startCall: (state) => {
      state.error = null;
      state.listLoading = true;
    },
    allReffEquipmentFetched: (state, action) => {
      state.listLoading = false;
      state.error = null;
      state.entities = action.payload;
    },
    catchError: (state, action) => {
      state.error = action.payload;
    },
  },
});

export default reducer;

export const {
  startCall,
  allReffEquipmentFetched,
  catchError,
} = actions;

export const fetchAllReffEquipment = () => async (dispatch) => {
  dispatch(actions.startCall());
  try {
    const response = await axios.get(`${API_URL}/public`); 
    console.log(response);
    // this console.log never never showed up when I call this function
    // note: this API_URL is correct
  } catch (err) {
    console.log(err);
    // get error 404
    window.alert(`Something went wrong. ${err}`);
    dispatch(catchError(err));
  }
};

根索引.js

import axios from "axios";
import * as _redux from "./redux";
import store, { persistor } from "./redux/store";
import App from "./app/App";

_redux.mockAxios(axios);
// if I comment this line, my pubilc API call fetched, but Authentication doesnt work

_redux.setupAxios(axios, store);

ReactDOM.render(
  <MetronicI18nProvider>
    <MetronicLayoutProvider>
      <MetronicSubheaderProvider>
        <MetronicSplashScreenProvider>
          <App store={store} persistor={persistor} basename={PUBLIC_URL} />
        </MetronicSplashScreenProvider>
      </MetronicSubheaderProvider>
    </MetronicLayoutProvider>
  </MetronicI18nProvider>,
  document.getElementById("root")
);

mockAxios.js

import MockAdapter from "axios-mock-adapter";
import mockAuth from "../../app/modules/Auth/__mocks__/mockAuth";

export default function mockAxios(axios) {
  const mock = new MockAdapter(axios, { delayResponse: 300 });
  // if this line commented, fetch public API from redux running well but authentication doesn't

  mockAuth(mock);

  return mock;
}

如何同时使用（模拟请求和真实请求）。谢谢

Answer 1

您正在直接使用库中的“axios”，然后进行 get 调用。它实际上会调用该 URL。

如下图创建一个axios实例，然后在mock适配器中使用这个导出的axios实例，就可以了。

export const axiosInstance = axios.create({
  baseURL: API_URL,
});

const mock = new MockAdapter(axiosInstance, { delayResponse: 300 });