如何从 mock api 中获取数据？

Question

我正在使用 https://www.npmjs.com/package/axios-mock-adapter 获取模拟响应。但我无法获得模拟响应。

这是我的代码 https://codesandbox.io/s/frosty-surf-g9tezx?file=/src/App.js

这里我正在获取实际数据

React.useEffect(() => {
  const a = async function () {
    const ab = await axios.get("https://jsonplaceholder.typicode.com/todos/1");
    console.log(ab);
  };
  a();
}, []);

使用我模拟的 axios 适配器 API

// This sets the mock adapter on the default instance
var mock = new MockAdapter(axios);

// Mock any GET request to /users
// arguments for reply are (status, data, headers)
mock.onGet("https://jsonplaceholder.typicode.com/todos/1").reply(200, {
  users: [{ id: 1, name: "John Smith" }],
});

我需要的不是实际请求，而是它会得到模拟响应，或者换句话说，我可以切换我的选项，有时它会转到实际请求，有时它会从模拟 api

Answer 1

您似乎遗漏了类似 import "./mockAPI" 的内容。现在，没有任何内容会导入您的模拟设置脚本，因此它永远不会运行。

我会像这样设置它，您可以在其中为您的应用程序创建一个 Axios 实例，以根据环境变量使用和有条件地应用模拟适配器

// api.js
import axios from "axios";
import MockAdapter from "axios-mock-adapter";

const api = axios.create({
  baseURL: process.env.REACT_APP_API_BASE
});

export const mock = new MockAdapter(api);

if (process.env.REACT_APP_MOCK_API === "true") {
  mock.onGet("/todos/1").reply(200, {
    users: [{ id: 1, name: "John Smith" }]
  });
} else {
  mock.restore();
}

export default api;

使用 .env 文件，如

REACT_APP_API_BASE=https://jsonplaceholder.typicode.com/
REACT_APP_MOCK_API=true

然后从 api.js 导入 Axios 实例，而不是直接使用 axios。

// import axios from "axios";  not this
import api from "./api";

// ...

useEffect(() => {
  api.get("/todos/1").then(({ data }) => {
    console.log(data);
  });
}, []);

你可以different .env files for different configurations

如何从 mock api 中获取数据？

how to fetch data from mock api in react?

javascript

reactjs

axios

axios-mock-adapter

react-hooks