在前端开发中，我们经常需要模拟后端 API 的数据返回结果。这时候，我们可以使用一些 mock 数据的工具来模拟数据返回结果。instant-mock 就是一款非常好用的 mock 工具，它具有简单易用、支持多种不同数据类型等特点，在前端开发中，能很好地提高工作效率。下面，就让我们一起来学习并使用 instant-mock。
1、安装 instant-mock
使用 npm 安装 instant-mock：
npm install instant-mock --save-dev
2、使用 instant-mock
使用 import 或 require 将 instant-mock 引入到项目中：
import mock from 'instant-mock'; // ES6
const mock = require('instant-mock'); // ES53、编写 mock 文件
在项目的根目录创建一个 mock 文件夹，在 mock 文件夹下创建一个 api.json 文件，并写入以下内容：
-- -------------------- ---- -------
-
----------- -------
------------ -
-
------- --------
---------- -
-
--------- ------
----------- -
------ -----
-
--
-
--------- -------
----------- -
---------- ----
-
-
-
-
-
-这里的 api.json 文件定义了一个 basePath，一个 endpoints 数组以及多个 method。basePath 是 API 的基本路径，endpoints 中的元素是一个具体的API接口，包含 path 和多个 method。每个 method 对应着 API 的一种 HTTP 请求方法，例如 get、post 等。response 表示 API 返回的数据。
4、开启 instant-mock
在项目中，使用以下代码开启 instant-mock：
mock({
mockDataPath: './mock/api.json'
});5、调用 API
在前端项目中调用 API，请求 URL 应该以定义在 api.json 中的 basePath 为开头，例如 '/api/user'。前端发送的请求所使用的 HTTP 方法，要和 api.json 中定义的 method 对应。
-- -------------------- ---- ------- -- ---- --- -- ------------------ - ------- ----- ----------- -- ----------- ---------- -- ------------------- -- ---- ---- -- ------------------ - ------- ------ ----------- -- ----------- ---------- -- -------------------
这里的两个请求将会被 instant-mock 拦截，并且返回定义在 api.json 中的 mock 数据。
至此，我们已经学会如何使用 instant-mock 来模拟 API 返回的数据。instant-mock 的使用非常简单，你只需要编写一个 api.json 文件即可。在实际开发中，我们可以将该文件配合前端框架的路由功能，来实现非常方便的数据模拟功能。
示例代码
-- -------------------- ---- ------- ------ ---- ---- --------------- -- -- ------------ ------ ------------- ----------------- --- -- --- -- ------------------ - ------- ----- ----------- -- ----------- ---------- -- ------------------- -- ---- -- ------------------ - ------- ------ ----------- -- ----------- ---------- -- -------------------
-- -------------------- ---- -------
-
----------- -------
------------ -
-
------- --------
---------- -
-
--------- ------
----------- -
------ -----
-
--
-
--------- -------
----------- -
---------- ----
-
-
-
-
-
-来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600557d881e8991b448d4e46