[英]Axios mock adapter giving error 'Error: Request failed with status code 404'
I have a component in which I am making an API call on 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;
And I have setup my mock adapter in a different folder like this我已经在这样的不同文件夹中设置了我的模拟适配器
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);
In my table file, I have this code -在我的表格文件中,我有这个代码 -
const users = [{ id: 1, name: "John Smith" }];
const featureTable = (mock: any) => {
mock.onGet("http://localhost:8080/users").reply(200, users);
}
export default featureTable;
Upon running the code, I get 404 error not found.运行代码后,我得到 404 错误未找到。 Please help with the fix.
请帮助修复。
First of all: you have to use the same axios
instance with both places: to setup the mock response and to make the actual call.首先:您必须在两个地方使用相同的
axios
实例:设置模拟响应并进行实际调用。 When I want to mock some API I usually create and export the axios instance in a separate file, and just import it where I need it.当我想模拟一些 API 时,我通常会在一个单独的文件中创建和导出 axios 实例,然后在需要的地方导入它。 like so:
像这样:
// 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);
I want to point out axios-response-mock as an alternative to axios-mock-adapter
.我想指出axios-response-mock作为
axios-mock-adapter
的替代品。 Disclaimer: I'm the author of that library.免责声明:我是该库的作者。 I was a bit frustrated by mock-adapter because I didn't find the API intuitive and it has limitations (eg can't match URL params in conjunction with POST requests) and that it would not let unmatched requests pass-through by default.
模拟适配器让我有点沮丧,因为我没有发现 API 直观并且它有局限性(例如,不能将 URL 参数与 POST 请求一起匹配)并且默认情况下它不会让不匹配的请求通过。
In your table file, you have to pass the relative path, not the absolute one.在您的表格文件中,您必须传递相对路径,而不是绝对路径。
const users = [{ id: 1, name: "John Smith" }];
const featureTable = (mock: any) => {
mock.onGet("/users").reply(200, users);
}
export default featureTable;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.