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

如何解决axios 得到 404 因为 axios 模拟适配器

我购买了带有 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")
);

模拟Axios.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;
}

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

解决方法

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

创建一个 Axios 实例，如下所示，然后在模拟适配器中使用这个导出的 axios 实例，它会工作。

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

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