在使用Angular、React、Vue等前端框架开发应用时，我们经常需要模拟数据进行开发和测试。Ember Data Mirage是一个非常棒的npm包，它提供了本地的数据模拟功能，可以让我们在开发和测试过程中不必连接到后端服务器来模拟数据。本文将为您介绍Ember Data Mirage的使用方法。
安装
首先，我们需要将Ember Data Mirage安装到我们的应用程序中。前提是我们的应用程序已经使用了Ember Data。
npm install ember-cli-mirage --save-dev
配置
安装完成后，我们需要对Ember Data Mirage进行配置。我们可以在 config/environment.js 文件中加入以下代码：
if (environment === 'development') {
// 开发环境下使用Ember Data Mirage
ENV['ember-cli-mirage'] = {
enabled: true
};
}通过这个配置，我们可以在开发环境下使用Ember Data Mirage。
基本使用
我们先来看一个简单的示例。假设我们有一个名为user的模型，我们可以在路由中使用如下代码：
// app/routes/user.js
import Ember from 'ember';
export default Ember.Route.extend({
model() {
return this.store.findAll('user');
}
});由于我们在配置中开启了Ember Data Mirage，所以我们现在可以在mirage/config.js文件中来定义user模型的一些数据：
-- -------------------- ---- -------
-- ----------------
------ ------- ---------- -
------------------ ---------- -
------ -
----- --
----- --------
--- --
----------- -
----- ----- -----
---- --
-
-- -
----- --------
--- --
----------- -
----- ----- -----
---- --
-
--
--
---
-在这个例子中，我们定义了一个名为users的路由，并返回了一个对象，该对象指定了类型为users的两个实例：John Doe和Jane Doe。
现在，如果我们再次执行this.store.findAll('user')，则可以获得从Ember Data Mirage返回的模拟数据。
模拟服务器端存储
数据模拟通常是用在测试和开发环境下。但在某些情况下，我们可能需要在生产环境下实现类似的数据模拟功能。Ember Data Mirage允许我们使用本地存储来存储模拟数据。
要使用本地存储，我们需要在配置中进行一些修改：
if (environment === 'development' || environment === 'production') {
// 在开发和生产环境下使用Ember Data Mirage
ENV['ember-cli-mirage'] = {
enabled: true,
trackRequests: true,
useDefaultPassthroughs: false
};
}我们开启了一个名为trackRequests的选项，该选项将允许我们追踪对服务器的请求，以便在需要时返回数据。
我们还需要在mirage/config.js文件中进行以下更改：
-- -------------------- ---- -------
------ ------- ---------- -
-------------- - --- -- -- ------ -----------
----------- - ----- -- ------
-- ------
------------------- ---------------- -------- -
--- ----- - --------------------------------
------ ---------------------------
---
------------------ ---------------- -
------ -------------------
---
---------------------- ---------------- -------- -
------ -------------------------------------
---
------------------------ ---------------- -------- -
--- ----- - --------------------------------
------ ---------------------------------------------------
---
-----------------------
-我们使用this.namespace做了一些修改，以便允许Ember Data Mirage处理访问应用程序的路由。我们还使用this.timing模拟了1秒钟的请求延迟。最重要的是，我们定义了我们的所有HTTP方法，以允许Ember Data Mirage为user模型设置本地存储。
结语
本文介绍了Ember Data Mirage的一些基础知识，并提供了一些示例代码。我们希望这篇文章对您有所帮助，并且可以帮助您更好地了解和使用Ember Data Mirage。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600556d381e8991b448d3aa4