如何在反應中從模擬 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);
  });
}, []);

不同的配置可以有不同的.env文件