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

简介: ![logo](https://github.com/Houfeng/faked/raw/master/docs/faked.png) ## 一、简介 faked 是一个在前端开发中用于 mock 服务端接口的模块,轻量简单,无需要在本地启动 Server 也无需其它更多的资源,仅在浏览器中完成「请求拉截」,配合完整的「路由系统」轻而易举的 mock 后端 API。 GitHub R

logo

一、简介

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'});
});

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

  • 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; 

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

八、JSONP 处理

faked 除了能 mock 常规的 ajaxfetch 请求,还能 mock 常常用来处理跨域问题的 jsonp 请求,faked 有两个参数用于配置 jsonp,参考如下代码:

//指定服务端用于获取「回调函数名」的 「QueryString 参数」
faked.jsonp.param = 'callback'; //默认值为 callback 和 jQuery 一致

//有些 jsonp 服务可能是固定了「回调函数名」,可以这样设定
faked.jsonp.callback = 'your-callbak-name'; 

九、注意事项

faked 是一个「辅助开发」的工具,除非有特殊需要,一般情况下它不应出现在你的生产代码中,所以需要注意:

  1. 请勿将 faked 放到「生产环境」的应用或页面中
  2. 找一个合适的你项目的方式决定什么时引用 faked

比如,在 webpak 中,可以根据环境变量决定入口文件,并只在 mock 的入口文件中引用 faked,示例:

webpack.config.js

module.exports = {
  entry: {
    //根据 NODE_ENV 决定是 index.js 还是 index.mock.js
    bundle: `./src/index${NODE_ENV=='mock'?'.mock':''}.js`
  },
  output: {
    path: './dist/',
    filename: `./[name]${NODE_ENV == 'prod'?'.min':''}.js`
  },
  devtool: 'source-map',
  module: {
    loaders: [...]
  },
  plugins: [...]
};

然后,在 index.mock.js 中这样写:

require('./mock')
require('./index');

用于存放的 mock 代码的 mock.js 可能是这样的:

const faked = require('faked');

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

当然,你可以根据实际情况,安排你的文或目录结构。

-- END --

目录
相关文章
|
1月前
|
数据可视化 测试技术 API
从接口性能到稳定性:这些API调试工具,让你的开发过程事半功倍
在软件开发中,接口调试与测试对接口性能、稳定性、准确性及团队协作至关重要。随着开发节奏加快,传统方式已难满足需求,专业API工具成为首选。本文介绍了Apifox、Postman、YApi、SoapUI、JMeter、Swagger等主流工具,对比其功能与适用场景,并推荐Apifox作为集成度高、支持中文、可视化强的一体化解决方案,助力提升API开发与测试效率。
|
2月前
|
人工智能 安全 测试技术
Apifox对决Apipost:API管理工具的深度较量与未来前瞻
在快节奏的软件开发中,API管理工具的选择直接影响效率与协作。本文对比Apipost与Apifox,从界面设计、核心功能、AI能力、离线支持、团队协作、生态整合及性能表现等维度,深入解析两者差异,帮助团队找到更契合的开发利器。
|
2月前
|
前端开发 测试技术 API
企业级API工具的选择:Apipost和Apifox哪个好
Apifox相比Apipost在企业级API协作方面表现更出色,其一体化平台设计有效提升团队协作效率,功能整合度高,支持标准化接口管理,更适合规模化团队和技术协作需求。
311 120
|
3月前
|
人工智能 NoSQL 测试技术
Apipost 与 Apifox:全栈工程师视角下的 API 工具抉择
本文对比了Apipost与Apifox两款API工具在AI能力、数据一致性管理、自动化测试、团队协作、协议支持、数据库支持及离线可用性等多个核心维度的表现。Apipost凭借AI智能化、数据自动同步、全面协议支持及离线功能等优势,在大型项目、高安全场景及多协议调试中表现更出色。而Apifox适合预算有限、小型团队及纯HTTP项目。
74 0
|
1月前
|
人工智能 搜索推荐 API
API文档工具谁能胜出:Apifox与Apipost深度对比
Apifox与Apipost功能对比显示,Apifox在自定义域名、页面布局、SEO优化、跨域代理、数据分析、版本管理及权限控制等方面优势明显,更适合对API文档有高要求的企业级用户;而Apipost则侧重基础文档分享,适合轻量级使用场景。两者均集成AI能力,但Apifox应用更深入。
API文档工具谁能胜出:Apifox与Apipost深度对比
|
2月前
|
供应链 安全 数据挖掘
1688电商API接口:赋能电商全链路运营的数字化工具
在数字经济时代,1688电商API接口为企业提供商品管理、订单处理、支付集成、物流跟踪等全场景解决方案,助力企业实现数据互通、流程自动化,提升运营效率与业务增长。
1688电商API接口:赋能电商全链路运营的数字化工具
|
2月前
|
测试技术 API 数据安全/隐私保护
企业API工具效率战:Apipost与Apifox的全面对比
在企业级API工具选型中,Apifox凭借出色的团队协作与研发流程整合能力脱颖而出。相较于专注API测试的Apipost,Apifox定位为“API一体化协作平台”,深度融合文档管理、接口调试、Mock服务与自动化测试,显著提升开发效率与协同质量。其系统性设计、标准化支持、友好交互及稳定服务,助力企业实现高效、规范、可持续的API研发管理。
|
2月前
|
前端开发 测试技术 API
国产 API 管理工具大比拼:Apifox 能否挑战 Postman?
在软件开发中,API 测试与管理工具至关重要。Postman 虽广受欢迎,但在国内常面临下载慢、注册难、功能收费等问题。Apifox 作为国产优秀替代工具,凭借简洁的界面、多功能集成、本地化服务等优势,逐渐成为开发团队的新选择。它支持接口设计、文档生成、Mock 服务、自动化测试等功能,提升团队协作效率,降低使用门槛,助力国内开发者实现高效开发与持续集成。
|
2月前
|
移动开发 小程序 安全
微信API社交裂变工具,老带新流量成本归零!
在数字化营销时代,利用微信API构建社交裂变工具,可实现“老带新”的病毒式传播,大幅降低获客成本。本文详解如何通过微信API实现零成本流量增长,解析裂变机制与技术实现。
123 0
|
3月前
|
运维 监控 数据可视化
电商API日志分析的实用工具
在电商领域,API日志记录了用户行为、交易状态等关键信息,分析这些日志有助于提升系统性能、优化用户体验并增强安全性。本文介绍ELK Stack、Splunk等常用日志分析工具,并通过实际案例说明如何从日志中挖掘业务价值,助力企业实现高效运营和智能决策。
91 0

热门文章

最新文章