axios 得到 404 因為 axios 模擬適配器

Question

我購買了帶有 axios-mock-adapter 的 Metronic React 模板。 I still need mock request for Authentication, but when I use Axios to fetch public API with Axios.get() returned 404 or undefined (see my redux modules below).

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; }

我如何同時使用（模擬請求和真實請求）。 謝謝

Answer 1

您正在直接使用庫中的“axios”，然后撥打電話。 它實際上調用了 URL。

如下所示創建一個 Axios 實例，然后在模擬適配器中使用這個導出的 axios 實例，它將起作用。

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

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