faked一個用於mock後端API的輕量工具

Houfeng發表於2017-03-27
Mock後端API

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

每一個 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;

超時設定和延時設定並不會相互影響，超時計算是從延時結束後開始的。

八、JSONP 處理

faked 除了能 mock 常規的 ajax 和 fetch 請求，還能 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 —


相關文章