Axios 模拟适配器给出错误“错误：请求失败，状态码 404”

Posted 2023-03-27

【中文标题】Axios 模拟适配器给出错误“错误：请求失败，状态码 404”

【英文标题】：Axios mock adapter giving error 'Error: Request failed with status code 404'

【发布时间】：2021-06-25 07:44:38

【问题描述】：

我有一个组件，我在挂载时进行 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);

在我的表格文件中，我有这个代码 -

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


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


export default featureTable;

运行代码时，我得到 404 错误未找到。请帮助修复。

【参考方案1】：

首先：您必须在两个地方使用相同的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 的替代品。免责声明：我是该库的作者。我对 mock-adapter 感到有些沮丧，因为我没有发现 API 直观且有局限性（例如，无法将 URL 参数与 POST 请求一起匹配），并且默认情况下它不会让不匹配的请求通过。

【参考方案2】：

在您的表格文件中，您必须传递相对路径，而不是绝对路径。

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


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


export default featureTable;

【讨论】：

相对路径也是一样的错误

我认为您必须使用与 mockAdapter 相同的 Axios 实例！

看起来你也已经尝试过了！刚刚看到注释代码

你在哪里导入了启动mockAdapter的文件。