Axios mock adapter giving error 'Error: Request failed with status code 404'

Question

我有一个组件，我正在其中对 mount

进行 API 调用

import * as React from 'react';
import axios from 'axios';
import './index.scss';
// import {axiosInstance} from '../../mocks/index';

// axios(client)
// axiosInstance(axios);
const FeatureTable = () => {
   React.useEffect(() => {
    axios.get("http://localhost:8080/users").then(function (response: any) {
      console.log(response.data);
    });
  }, []);

  return (
    <div className="container">
  </div>
  )
}

export default FeatureTable;

我已经在另一个文件夹中设置了我的模拟适配器，就像这样

const Axios = require("axios");
const MockAdapter = require("axios-mock-adapter");
import featureTable from './table';

export const axiosInstance = Axios.create();
const mock = new MockAdapter(axiosInstance, { delayResponse: 1000,  onNoMatch: "throwException"  });

featureTable(mock);

在我的 table 文件中，我有这段代码 -

const users = [{ id: 1, name: "John Smith" }];


const featureTable = (mock: any) => {
  mock.onGet("http://localhost:8080/users").reply(200, users);
}

export default featureTable;

根据运行代码，我收到 404 错误未找到。请帮助修复。

Answer 1

在你的 table 文件中，你必须传递相对路径，而不是绝对路径。

const users = [{ id: 1, name: "John Smith" }];


const featureTable = (mock: any) => {
  mock.onGet("/users").reply(200, users);
}

export default featureTable;

Answer 2

首先：您必须在两个地方使用相同的 axios 实例：设置模拟响应和进行实际调用。当我想模拟一些 API 时，我通常会在一个单独的文件中创建和导出 axios 实例，然后将其导入到我需要的地方。像这样：

// dataAPI.js
import axios from 'axios';

export const dataAPI = axios.create(); // general settings like baseURL can be set here

// FeatureTable.js
import React, { useEffect } from 'react';
import { dataAPI } from './dataAPI';

export const FeatureTable = () => {
  useEffect(() => {
    dataAPI.get('http://localhost:8080/users').then(something);
  }, []);

  return (<div>something</div>);
};

// mock.js
import { dataAPI } from './dataAPI';
import MockAdapter from 'axios-mock-adapter';
import { users } from './mockData.js'

const mock = new MockAdapter(dataAPI);
mock.onGet('http://localhost:8080/users').reply(200, users);

我想指出 axios-response-mock 作为 axios-mock-adapter 的替代方案。免责声明：我是那个图书馆的作者。我对模拟适配器有点沮丧，因为我没有发现 API 直观并且它有局限性（例如不能匹配 URL 参数与 POST 请求）并且默认情况下，它不会让不匹配的请求通过。

Axios mock adapter giving error 'Error: Request failed with status code 404'

Axios mock adapter giving error 'Error: Request failed with status code 404'

javascript

reactjs

axios

json-server

axios-mock-adapter