介绍一个强大的 API Mock 工具 Mirage JS

随着 Web 开发进入 SPA 和 JAMstatck 时代，前后端分离已经成为大势所趋。几乎所有的 JavaScript 项目都需要跟 web service 或者后端 API 交互，用于认证或者获取用户数据。

所以当你在开发一个项目的时候，必要的一些后端 API 可能还没有实现，或者你想快速测试某个功能，你可以有下面这些选择：

• 代理到后台服务的本地运行版本，但是作为前端开发，很可能没有这种环境
• 注释掉真实请求代码，换上假数据。可以这么做，但是在上线前还需要把代码改回来，而且不能模拟网络状态和延迟。

API Mock 是什么

API mock 就是对真实 API 的模拟，通常通过拦截对真实后台 API 的请求，替换成假数据。

为什么需要 API Mock

API Mock 的好处主要是：

1. 开发时不依赖后端 API，前端开发体验更好
2. 可以将整个前端应用分享给别人，脱离后端依然能跑

Mirage JS 是什么

Mirage JS 创建于5年前，在 Sam Selikoff 于 2020 年1月24日发推特官宣发布之前，广泛应用于 Ember 社区。它解决了测试后端 API 的难题，做到了无需依赖后台 API，提供无缝的前端开发体验。适用于 Vue.js，React，Angular 和 Ember 等框架的 API Mock。

Mirage JS 好在哪？

API mocking 也有不少其他选择，比如 axios 拦截器、JSON Server 等，但是 Mirage 的优势是它不妨碍开发过程（通过后面的 Vue 示例可以看到），轻量而又强大。

它自带开箱即用的功能，可以复制生产环境 API 的使用场景，比如通过timing 选项模拟低速网络。

Mirage JS 结合 Vue.js 快速上手

了解完 Mirage JS 的功能和优势后，我们结合渐进式框架 Vue.js 来上手实操。

创建全新的 Vue 项目

利用 Vue CLI ，选择好目录，创建一个全新的 Vue.js 项目：

vue create miragejs-demo-vue 

这个命令大家应该很熟悉了，创建完后 cd 进去目录。

安装 Mirage JS

在项目里安装 Mirage JS 作为开发依赖：

yarn add -D miragejs

或者用 NPM 的话：

npm install --save-dev miragejs

装好后我们来看下怎么配置，就用模拟最基础的 todos API 来举例。

定义 Server

首先在 Vue.js 项目的 /src 目录里创建一个server.js文件，加上如下代码：

import { Server, Model } from 'miragejs'

export function makeServer({ environment = "development" } = {}) {

let server = new Server({
  // 环境变量
  environment,
   // 数据模型，描述数据结构，用于 Mirage 的 ORM
  models: {
    todo: Model,
  },
  // 数据生成器
  seeds(server) {
    server.create("todo", { content: "Learn Mirage JS" })
    server.create("todo", { content: "Integrate With Vue.js" })
  },
  // 路由处理
  routes() {

    this.namespace = "api"

    this.get("/todos", schema => {
      return schema.todos.all()
    })
    // 如果执行这个方法，其他没有匹配的请求路径不会拦截。适合只模拟部分接口的情况
    this.passthrough()
  },
  })

  return server
}

this line sets up the namespace for all routes that means our todo route can now be accessed from /api/todos.

this.get("/todos", schema => {
  return schema.todos.all()
})

src/main.js

src/server.js 设置好了，Vue 项目怎么使用它呢？在项目入口文件main.js 中引入就行了：

import { makeServer } from "./server"
// 判断当前环境，如果是本地开发，才启动 mock 服务
if (process.env.NODE_ENV === "development") {
  makeServer()
}

一切准备就绪。把 App.vue 的代码改成这样：

<template>
  <ul id="todos">
    <li v-for="todo in todos" v-bind:key="todo.id">{{ todo.content }}</li>
  </ul>
</template>

<script>
  export default {
    name: 'app',

    data() {
      return {
        todos: []
      }
    },

    created() {
      fetch("/api/todos")
        .then(res => res.json())
        .then(json => {
          this.todos = json.todos
        })
    }
  }
</script>

开发过实际项目的同学应该很熟悉了，这跟请求真实后台 API 没什么区别。

Mirage JS 到底做了啥？

你可能会觉得奇怪，Mirage JS 到底做了什么，后台请求全都转到模拟接口上去了？其实通过前面的代码也能看出，在本地开发模式下，它会拦截所有请求，只要匹配到 routes 规则定义里的路径，就会返回生成的假数据。同时，项目部署上线时，代码完全不用修改，因为生产环境下它不会启用 mock 服务。

参考资料

• The Mirage Docs
• Mirage Vue Quickstart

看到这个颇有气质的 logo，不来关注下吗？

image