Mirage-JS

API 正变得越发的标准化,因此,Mirage 引入了 路由缩写 shoorthands 的概念来替代许多自定义路由处理器的编写,从而可以更轻松的编写,也极大地简化了路由处理器的定义。

例如,这个非常标准的函数式路由,它将返回一个与路径同名的数据集合:

1
2
3
this.get('/movies', (schema, request) => {
return schema.movies.all()
})

同时,也可以使用路由缩写来完成相同的工作:

1
this.get('/movies')

这是一个完整的路由。它能从路径的最后一部分推断模型名称,并返回同名的数据集合。

如果通过查询 ID 得到单条数据,也是非常简单的:

1
this.get('/movies/:id')

使用路由缩写同样可以完成新建或者编辑数据。这也是一个标准的路由,它使用请求体中的一个属性 movie 来创建一条新的数据:

1
2
3
4
5
this.post('/movies', (schema, request) => {
let attrs = JSON.parse(request.requestBody).movie

return schema.movies.create(attrs)
})

同样的工作也可以使用缩写来完成:

1
this.post('/movies')

路由缩写使用基于 HTTP 动词的默认状态码:

  • GET, PATCH/PUT, DEL 200
  • POST 201

阅读更多

路由处理器(Route handlers)

前一章节已经快速了解过路由处理器的工作模式,这一节着重了解路由处理器中一些参数的意义。先从路由的两个定义方法开始。

路由处理器的定义(Define route handlers)

最简单的方法是直接在路由的第二个参数返回一个对象作为响应的数据,为了便于记忆,可以称之为对象式:

1
this.get("/movies", { movies: ["Interstellar", "Inception", "Dunkirk"] })

接下来是平时比较常用的函数式路由:

1
2
3
this.get("/movies", (schema, request) => {
return ["Interstellar", "Inception", "Dunkirk"]
})

函数式路由可以灵活方便的访问 Mirage 的数据层和请求对象。大多数时候都使用函数式路由。

你可以使用任何 HTTP 动词来定义路由,它们的定义方法都是一样的,第一个参数表示 API URL,第二个参数通常是一个用来返回响应数据的函数。

1
2
3
4
5
6
7
// this.[HTTP verbs].(API_URL, () => {})
this.get('/movies', () => { ... });
this.post('/movies', () => { ... });
this.patch('/movies/:id', () => { ... });
this.put('/movies/:id', () => { ... });
this.del('/movies/:id', () => { ... });
this.options('/movies', () => { ... });

阅读更多

最近在项目中使用了 Mirage ,看着官方文档,做了一些笔记。文中的内容都来自于官方文档,包括例子,并没有完整翻译官方文档,结合自己的使用体会做了增删,就是翻译了又没完全翻译。

简介

Mirage 是一个让前端开发人员模拟后端 API 的 JavaScript 库。用人话说就是:Mirage 是一个 Mock 服务器。

Mirage 在浏览器中运行。它能拦截 Javascript 应用程序发出的任何 XMLHttpRequestfetch 请求,并允许模拟这些请求所对应的响应结果。

Mirage 除了拦截 HTTP 请求外,还提供了一个模拟数据库和一系列辅助函数,可以轻松模拟后端服务。

Mirage 借鉴了典型的 API 服务端框架的概念,拥有例如:

  • 处理 HTTP 请求的路由(routes)
  • 数据库(database)和数据模型(models),用于存储数据和定义数据之间的关系
  • factories(模型工厂) and fixtures for stubbing data(数据填充)
  • 用于格式化 HTTP 响应的序列化函数(serializers)

安装

Mirage 很容易可以集成到现有项目中。

1
2
3
npm install --save-dev miragejs
# or
yarn add --dev miragejs

概览

Mirage 可以通过 路由处理器(route handlers)轻易的模拟一个 API 请求的响应结果。

阅读更多

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×