faked 一个用于 mock 后端 API 的轻量工具

一、简介

faked 是一个在前端开发中用于 mock 服务端接口的模块,轻量简单,无需要在本地启动 Server 也无需其它更多的资源,仅在浏览器中完成「请求拉截」,配合完整的「路由系统」轻而易举的 mock 后端 API。

GitHub Rep 地址:https://github.com/Houfeng/faked

二、安装 faked

有两种可选安装方式,你可以通过传统的 sciprt 方式引入 faked,如果你采用了 CommonJs 或 ES6 Modules 模块方案,也可通过安装 NPM Pageage 的方式安装依赖。

通过 script 引入:

<script src="your-path/faked.min.js"></script>

通过 npm 安装:

$ npm i faked --save-dev

CommonJs 方式引用

const faked = require(‘faked‘);

ES6 Modules 方式引用

import faked from ‘faked‘

三、基本使用

通过 faked.when 方法你几乎就可以使用 faked 的所有功能了,尽管 faked 还提供了一组「快捷方法」,faked.when 方法说明如下:

//指定单一 Http Method
faked.when(<method>, <pattern>, <handler>);

//指定多个 Http Method
faked.when(<methods>, <pattern>, <handler>);

示例,模拟一个获取用户信息的接口,参考如下代码:

faked.when(‘get‘,‘/user/{id}‘, function(){
  this.send({name:‘Bob‘});
});

每一个 handler 的 this 就是当前请求上下文对象,对象有如下主要成员:

  • this.send(data, status, headers) 方法,用于响应一个请求,status 默认为 200
  • this.params 路由参数对象,用于访问路由模式中的「路由参数」,如上边示例中的 id
  • this.query 解析查询字符串对应的对象,比如 ?name=bob 可以通过 this.query.name 访问
  • this.body 请求的主体内容,通常会是一个 json 对象,它取决于发起的请求。

除了使用 send 方法,还可以直接「返回」数据,参考如下代码:

faked.when(‘get‘,‘/user/{id}‘, function(){
  return {name:‘Bob‘};
});

当然,在有「异步处理」时你也可以返回一个 promise 对象或像上边那样用 send 方法。如果你只想 mock 数据,还可以使用简化写法,参考如下代码:

faked.when(‘get‘,‘/user/{id}‘, {name:‘bob‘});

四、快捷方法

faked 还基于 when 方法提供了一组快捷方法,对应常用的 Http Methods,包括:

get, post, put, delete, options, patch, head, copy, link, unlink, lock, unlock, view

用 faked.get 写一个示例:

faked.get(‘/user/{id}‘,function(){
  this.send({name:‘Bob‘});
});

其它快捷方法和 faked.get 用法完全一致。

五、路由系统

在编辑 Mock API 时, faked 提供了路由支持,如上边看到的 /user/{id},就是一个路由「匹配模式」,其中 {id} 是一个路由参数,当多个路由同时匹配请求的 URL 时,只会触发第一个执行,不同的 Http Method 的 URL 匹配模式可以相同,并不会冲突。路由参数还可以加「限定表达式」,参考如下代码:

// User Id 只能是数字
faked.get(‘/user/{id:\d+}‘, {name:‘test‘});

六、模拟网络延时

有时候,我们希望 Mock API 能延时响应数据,以模拟「网络延时」,faked 目前支持固定的「延时设置」,参考如下代码:

const faked = require(‘faked‘);

//所有的请求都将被延时 2 秒种再响应用 mock 数据
faked.delay = 2000;

当 delay 设置 0 时,将禁用延时。

七、设置超时时间

faked 还可设置 Mock API 的最大响应时间,这项设置存在的意义还在于「所有 Mock API 的 Handler 默认都是异步的,如果忘记「返回或 Send」一个响应结果,请求将会被一直挂起,有了超时设置,超时时将会抛出一个错误,方便定位问题」,参考如下代码:

const faked = require(‘faked‘);

//在超过 8 秒未响应数据时,将会打印一个错误消息
faked.timeout = 8000;

超时设置和延时设置并不会相互影响,超时计算是从延时结束后开始的。

阅读全文:http://click.aliyun.com/m/15160/

时间: 2024-10-12 13:17:01

faked 一个用于 mock 后端 API 的轻量工具的相关文章

Vue 全家桶 + Express 实现的博客(后端API全部自己手写)

为什么学习并使用Vue 1.发展趋势 最近这几年的前端圈子,由于戏台一般精彩纷呈,从 MVC 到 MVVM,你刚唱罢我登场. backbone,AngularJS 已成昨日黄花,reactjs 如日中天,同时另一更轻量的 vue 发展势头更猛,号称兼具了 angularjs 和 reactjs 的两者优点. 2.Vue能干吗 移动端的上网需求已经远高于pc端,特别是 hybrid 方式的H5应用中,但是性能问题一直是痛点. 如果使用 SPA(就是俗称的单页应用(Single Page Web A

app后端开发二:API接口文档工具

悲伤的历史 在进行app后端开发过程中,后端会提供出来很多的api接口供前端开发使用,为了让前端开发人员顺利使用,我们会写好一份文档,告诉他们这个接口你该用 GET 还是 POST 来访问,同时访问的时候该给我传递一些什么参数,以及正确的时候我会返回什么给你,已经返回的数据样式以及字段解释等等这些事情,我们都需要在文档中写好写清楚. 在 app后端开发一:基于swagger-ui构建api接口文档工具 这篇博客中,我写了 swagger-ui 的好处以及优势.但是在使用过程中,发现不够给力.我想

Meteor 前端 RESTful API 通过后端 API 下载文件

Meteor 下载文件 问题场景 后端 HTTP 服务器提供一个下载接口,但是需要前端 Meteor 能够给浏览器用户开一个URL来下载这个文件. 举例:在线的Meteor Logo文件就好比后端提供的 RESTful API,然后我们给浏览器客户暴露一个 URL 来下载 Meteor 依赖 安装所有依赖: meteor add http meteor add cfs:http-methods meteor add froatsnook:request 说明: * cfs:http-method

一个用于网站自动化测试的生态系统实现

这是我在从事网站自动化测试的工作当中构建出的一个"生态系统"."生态系统"这个概念是我从公司的前辈身上学到的,他一直以来都认为自动化测试人员不应仅仅局限于编写测试代码,还应该让整个自动化测试的过程(测试代码的持续集成.分发.执行等)都自动化,形成一个"系统",这个系统的自动化程度越高,自动化测试人员就越省力. 一.概念 这里我画了一张示意图: 之所以称之为"生态系统",是因为建成之后需要的人为干涉很少,其余的时间都是系统内部循

后端api规范说明文档

我们此次后端api的实现主要是按照RESTful api规范来设计的,就是符合REST架构下设计api的规范.简单的来说REST结构就是:利用URL定位资源,用HTTP动词(GET,POST,PUT,DELETE)来描述相应操作. RESTful api主要的意义在于它可以让在不同形式的前端所接受到的用户请求能够统一的发送到一个后台并返回不同的前端.RESTful api是由后端SERVER实现并提供给前端来调用的一个接口.前端调用API来向后台发起HTTP请求,后台响应请求并将处理结构反馈给前

巧用命令行工具UCloud CLI,轻量操作API管理云资源

截止目前,UCloud已提供Python/Java/Golang等不同语言的API SDK.为进一步降低用户的运维人力投入,又推出了基于Golang SDK的命令行工具CLI(Command Line Interface),提供轻量化的API命令行调用方式,并在GitHub开源(https://github.com/ucloud/ucloud-cli).CLI的命令行交互方式更符合研发运维的操作习惯,并且一些典型使用场景通过CLI也更容易代码化的沉淀和维护. 下面是一些用户遇到的实际场景, 用C

一个轻量系统的诞生

经过几个月的业余时间,为一家公司设计了如下一套简单,轻量的内部管理系统.在这几个月中,基本牺牲了所有的业余时间,不乏晚上加班加点.一个人和工厂讨论需求,提出设计想法,和工厂人员确定这么“整”还是那么“整”,是否可满足具体要求. 然后再回到家进行Coding.... 做该项目的意义何在?其实市场上有很多XX ERP,XXX协同系统.这些系统功能可能很强大,强大到太强而不能用. 最重要的一点是,并不是适合具体公司的业务流程和业务内容. 如果你们公司买了一套系统有可能就是将你公司的管理调整到和要上的系

Numeral.js 是一个用于格式化和数字四则运算的js 库

1.Numeral.js 是一个用于格式化和数字四则运算的js 库. 2.支持多种语言,包含中文在内的17种语言. 在浏览器中引用js文件: <script src="numeral.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/numeral.js/1.4.5/numeral.min.js"></script> 在nodejs开发引用开

Selenium也是一个用于Web应用程序测试的工具

Selenium也是一个用于Web应用程序测试的工具.Selenium测试直接运行在浏览器中,就像真正的用户在操作一样.支持的浏览器包括IE.Mozilla Firefox.Mozilla Suite等.这个工具的主要功能包括:测试与浏览器的兼容性--测试你的应用程序看是否能够很好得工作在不同浏览器和操作系统之上.测试系统功能--创建衰退测试检验软件功能和用户需求.支持自动录制动作和自动生成.Net.Java.Perl等不同语言的测试脚本.Selenium 是ThoughtWorks专门为Web