一、簡(jiǎn)介

faked 是一個(gè)在前端開(kāi)發(fā)中用于 mock 服務(wù)端接口的模塊，輕量簡(jiǎn)單，無(wú)需要在本地啟動(dòng) Server 也無(wú)需其它更多的資源，僅在瀏覽器中完成「請(qǐng)求拉截」，配合完整的「路由系統(tǒng)」輕而易舉的 mock 后端 API。

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

二、安裝 faked

有兩種可選安裝方式，你可以通過(guò)傳統(tǒng)的 sciprt 方式引入 faked，如果你采用了 CommonJs 或 ES6 Modules 模塊方案，也可通過(guò)安裝 NPM Pageage 的方式安裝依賴。

通過(guò) script 引入：

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

通過(guò) npm 安裝：

$ npm i faked --save-dev

CommonJs 方式引用

const faked = require('faked');

ES6 Modules 方式引用

import faked from 'faked'

三、基本使用

通過(guò) faked.when 方法你幾乎就可以使用 faked 的所有功能了，盡管 faked 還提供了一組「快捷方法」，faked.when 方法說(shuō)明如下：

//指定單一 Http Method faked.when(<method>, <pattern>, <handler>);//指定多個(gè) Http Method faked.when(<methods>, <pattern>, <handler>);

示例，模擬一個(gè)獲取用戶信息的接口，參考如下代碼：

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

每一個(gè) handler 的 this 就是當(dāng)前請(qǐng)求上下文對(duì)象，對(duì)象有如下主要成員:

• this.send(data, status, headers) 方法，用于響應(yīng)一個(gè)請(qǐng)求，status 默認(rèn)為 200
• this.params 路由參數(shù)對(duì)象，用于訪問(wèn)路由模式中的「路由參數(shù)」，如上邊示例中的 id
• this.query 解析查詢字符串對(duì)應(yīng)的對(duì)象，比如 ?name=bob 可以通過(guò) this.query.name 訪問(wèn)
• this.body 請(qǐng)求的主體內(nèi)容，通常會(huì)是一個(gè) json 對(duì)象，它取決于發(fā)起的請(qǐng)求。

除了使用 send 方法，還可以直接「返回」數(shù)據(jù)，參考如下代碼：

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

當(dāng)然，在有「異步處理」時(shí)你也可以返回一個(gè) promise 對(duì)象或像上邊那樣用 send 方法。如果你只想 mock 數(shù)據(jù)，還可以使用簡(jiǎn)化寫(xiě)法，參考如下代碼：

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

四、快捷方法

faked 還基于 when 方法提供了一組快捷方法，對(duì)應(yīng)常用的 Http Methods，包括：

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

用 faked.get 寫(xiě)一個(gè)示例：

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

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

五、路由系統(tǒng)

在編輯 Mock API 時(shí)， faked 提供了路由支持，如上邊看到的 /user/{id}，就是一個(gè)路由「匹配模式」，其中 {id} 是一個(gè)路由參數(shù)，當(dāng)多個(gè)路由同時(shí)匹配請(qǐng)求的 URL 時(shí)，只會(huì)觸發(fā)第一個(gè)執(zhí)行，不同的 Http Method 的 URL 匹配模式可以相同，并不會(huì)沖突。路由參數(shù)還可以加「限定表達(dá)式」，參考如下代碼：

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

六、模擬網(wǎng)絡(luò)延時(shí)

有時(shí)候，我們希望 Mock API 能延時(shí)響應(yīng)數(shù)據(jù)，以模擬「網(wǎng)絡(luò)延時(shí)」，faked 目前支持固定的「延時(shí)設(shè)置」，參考如下代碼：

const faked = require('faked');//所有的請(qǐng)求都將被延時(shí) 2 秒種再響應(yīng)用 mock 數(shù)據(jù) faked.delay = 2000;

當(dāng) delay 設(shè)置 0 時(shí)，將禁用延時(shí)。

七、設(shè)置超時(shí)時(shí)間

faked 還可設(shè)置 Mock API 的最大響應(yīng)時(shí)間，這項(xiàng)設(shè)置存在的意義還在于「所有 Mock API 的 Handler 默認(rèn)都是異步的，如果忘記「返回或 Send」一個(gè)響應(yīng)結(jié)果，請(qǐng)求將會(huì)被一直掛起，有了超時(shí)設(shè)置，超時(shí)時(shí)將會(huì)拋出一個(gè)錯(cuò)誤，方便定位問(wèn)題」，參考如下代碼：

const faked = require('faked');//在超過(guò) 8 秒未響應(yīng)數(shù)據(jù)時(shí)，將會(huì)打印一個(gè)錯(cuò)誤消息 faked.timeout = 8000;

超時(shí)設(shè)置和延時(shí)設(shè)置并不會(huì)相互影響，超時(shí)計(jì)算是從延時(shí)結(jié)束后開(kāi)始的。

八、JSONP 處理

faked 除了能 mock 常規(guī)的 ajax 和 fetch 請(qǐng)求，還能 mock 常常用來(lái)處理跨域問(wèn)題的 jsonp 請(qǐng)求，faked 有兩個(gè)參數(shù)用于配置 jsonp，參考如下代碼：

//指定服務(wù)端用于獲取「回調(diào)函數(shù)名」的 「QueryString 參數(shù)」 faked.jsonp.param = 'callback'; //默認(rèn)值為 callback 和 jQuery 一致//有些 jsonp 服務(wù)可能是固定了「回調(diào)函數(shù)名」，可以這樣設(shè)定 faked.jsonp.callback = 'your-callbak-name';

九、注意事項(xiàng)

faked 是一個(gè)「輔助開(kāi)發(fā)」的工具，除非有特殊需要，一般情況下它不應(yīng)出現(xiàn)在你的生產(chǎn)代碼中，所以需要注意：

請(qǐng)勿將 faked 放到「生產(chǎn)環(huán)境」的應(yīng)用或頁(yè)面中

找一個(gè)合適的你項(xiàng)目的方式?jīng)Q定什么時(shí)引用 faked

比如，在 webpak 中，可以根據(jù)環(huán)境變量決定入口文件，并只在 mock 的入口文件中引用 faked，示例:

webpack.config.js

module.exports = {entry: {//根據(jù) NODE_ENV 決定是 index.js 還是 index.mock.jsbundle: `./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 中這樣寫(xiě)：

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

用于存放的 mock 代碼的 mock.js 可能是這樣的：

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

當(dāng)然，你可以根據(jù)實(shí)際情況，安排你的文或目錄結(jié)構(gòu)。

-- END --

總結(jié)

以上是生活随笔為你收集整理的faked 一个用于 mock 后端 API 的轻量工具的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。