axios获得404，因为axios模拟适配器

Question

我买了内部带有axios-mock-adapter的Metronic React模板。我仍然需要模拟身份验证请求，但当我使用Axios获取公共应用程序接口时，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));
  }
};

​

根index.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实例，然后在模拟适配器中使用这个导出的axios实例，它将正常工作。

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

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