如何解决Axios 模拟适配器给出错误“错误:请求失败,状态码为 404”
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;
解决方法
首先:您必须在两个地方使用相同的 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 请求相匹配)并且默认情况下它不会让不匹配的请求通过。
在您的表文件中,您必须传递相对路径,而不是绝对路径。
const users = [{ id: 1,name: "John Smith" }];
const featureTable = (mock: any) => {
mock.onGet("/users").reply(200,users);
}
export default featureTable;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。