ReactJS 使用Axios模拟数据

内小子
598 阅读4分钟

了解如何使用 Axios Mocking Adapter（模拟适配器） 让React在内存中使用模拟API

Axios 是一个 JavaScript 库，它提供了一个简单的接口来向 API 发送 HTTP 请求。此外，它还提供了模拟这些端的能力，以简化前端开发。

本文将讨论模拟数据的重要性以及如何用ReactJS 和 Axios 实现。

为什么使用Axios模拟APIs？

让我们从这个问题开始，“为什么我们应该使用 Mock APIs（模拟接口）?”。这不只是因为一个原因。有一些显著的优势，包括:

  • 前端有能力进行单元测试
  • 开发过程中前后端相互依赖最小
  • 前端开发人员的迭代时间更少(因此有更好的开发体验)。

既然好处是显而易见的，那么让我们来看看如何在实践中使用 Axios 来模拟。

1. 设置Axios 模拟适配器

当涉及到模拟 Axios 时，一切都要从 Mock Adapter（模拟适配器）开始。它是一个不同的 NPM 库，提供了 模拟 API 请求额外的能力。

你可以使用命令 npm install --save-dev axios-mock-adapter 安装它。

然后你需要创建一个Axios 实例并把它传给Axios适配器

import axios, { AxiosRequestConfig } from 'axios';
import AxiosMockAdapter from 'axios-mock-adapter';

const axiosMockInstance = axios.create();

export const axiosMockAdapterInstance = new AxiosMockAdapter(
  axiosMockInstance,
  { delayResponse: 0 }
);

export default axiosMockInstance;

您可以看到，我在上面的代码中导出了 Mock Adapter（模拟适配器） 和 Axios Mock instance（模拟实例）。他们都有各自不同的目的。

  • Axios Mock Adapter Instance ー这用于定义模拟请求来处理模拟数据的代码。
  • Axios Mock Instance ー这个用作在React 中作为一个常规Axios实例调用 API 的。

2. 在React中使用模拟实例对象

在 React 中使用 模拟实例非常简单。您不需要对 React 代码进行任何更改。唯一需要做的就是在组件代码中导入正确的实例。

但是，如果在名为 libs/axios.ts的文件中使用上述代码片段，则必须从该文件中导入 Axios实例以调用 API。因此，如您所见，它创建了一个挑战，您被模拟实例限制了。

为了解决这个问题，我们可以实例化 Axios 实例并根据环境变量返回。此外，它还提供了通过简单地改变一个变量来在两者之间切换的选项。

我们可以通过如下修改上面的代码片段来实现这一点。

import axios, { AxiosRequestConfig } from 'axios';
import AxiosMockAdapter from 'axios-mock-adapter';

const axiosMockInstance = axios.create();
const axiosLiveInstance = axios.create();

export const axiosMockAdapterInstance = new AxiosMockAdapter(
  axiosMockInstance,
  { delayResponse: 0 }
);

export default process.env.isAxioMock ? axiosMockInstance : axiosLiveInstance;

现在我们可以从上述文件中导入，并在React组件中像往常一样使用它。

3. 实现模拟

现在，我将进入本文最令人兴奋的部分，创建我们的模拟文件。下面的例子展示了我们如何创建其中一个 例如 _mock_/profile.ts

import { axiosMockAdapterInstance } from 'src/lib/axios';

mock.onGet('/api/social/publications').reply(() => {
  const profile: Profile = {
  id: '5e8891ab188cd28',
  avatar: '/static/mock-images/avatars/jane.png',
  bio: 'Product Designer',
  email: 'jane@test.com',
  name: 'Jane'
};

return [200, { profile }];

如果仔细检查这里导入的文件，我们已经导入了在前一个文件中创建的 Axios Mock Adapter Instance（模拟适配器实例），并添加了模拟代码。

我们可以在创建的实例中添加模拟代码。但是，随着时间增长，创建模拟代码导致文件增长导致灵活性会降低。

但是，这种方法会产生另一个问题，因为应用程序不直接导入这些模拟文件。因此，要么您必须逐个导入它们，要么使用别的方法将它们全部导入。

我使用后一种方法从 React 应用中的index.tsx文件中全量导入它们。

import './__mocks__';

注意:从优化的角度看，这不是最好的方法，但我想避免一个接一个导入的麻烦,只是临时用。

模拟中可用的JavaScript库

我希望你现在了解具体如何设置Axios 进行模拟了。而且，值得注意的是，Axios Mocking Adapter（模拟适配器） 只是在 React 中模仿 API 调用的一种方式。你还可以尝试其他的选择。我在下面列出了其中的一些。

或者，如果不想使用这些库，可以使用 HTTP 拦截器来模拟 API 调用。

Summary总结

我希望您对使用 Axios Mocking Adapter 用于React中模拟API 有一个很好的理解。它将帮助您在前端开发中更快地迭代，并节省执行单元测试的时间。

如果你有任何问题，请在下面的评论中告诉我，谢谢阅读！

avatar
文章
阅读
粉丝