天天看點

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

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

faked 是一個在前端開發中用于 mock 服務端接口的子產品,輕量簡單,無需要在本地啟動 server 也無需其它更多的資源,僅在浏覽器中完成「請求拉截」,配合完整的「路由系統」輕而易舉的 mock 後端 api。

有兩種可選安裝方式,你可以通過傳統的 <code>sciprt</code> 方式引入 faked,如果你采用了 commonjs 或 es6 modules 子產品方案,也可通過安裝 npm pageage 的方式安裝依賴。

通過 script 引入:

通過 npm 安裝:

commonjs 方式引用

es6 modules 方式引用

通過 <code>faked.when</code> 方法你幾乎就可以使用 faked 的所有功能了,盡管 faked 還提供了一組「快捷方法」,<code>faked.when</code> 方法說明如下:

示例,模拟一個擷取使用者資訊的接口,參考如下代碼:

每一個 <code>handler</code> 的 <code>this</code> 就是目前請求上下文對象,對象有如下主要成員:

<code>this.send(data, status, headers)</code> 方法,用于響應一個請求,status 預設為 200

<code>this.params</code> 路由參數對象,用于通路路由模式中的「路由參數」,如上邊示例中的 id

<code>this.query</code> 解析查詢字元串對應的對象,比如 <code>?name=bob</code> 可以通過 <code>this.query.name</code> 通路

<code>this.body</code> 請求的主體内容,通常會是一個 <code>json</code> 對象,它取決于發起的請求。

除了使用 <code>send</code> 方法,還可以直接「傳回」資料,參考如下代碼:

當然,在有「異步處理」時你也可以傳回一個 <code>promise</code> 對象或像上邊那樣用 <code>send</code> 方法。如果你隻想 mock 資料,還可以使用簡化寫法,參考如下代碼:

faked 還基于 when 方法提供了一組快捷方法,對應常用的 http methods,包括:

用 <code>faked.get</code> 寫一個示例:

其它快捷方法和 <code>faked.get</code> 用法完全一緻。

在編輯 mock api 時, faked 提供了路由支援,如上邊看到的 <code>/user/{id}</code>,就是一個路由「比對模式」,其中 <code>{id}</code> 是一個路由參數,當多個路由同時比對請求的 url 時,隻會觸發第一個執行,不同的 <code>http method</code> 的 url 比對模式可以相同,并不會沖突。路由參數還可以加「限定表達式」,參考如下代碼:

有時候,我們希望 mock api 能延時響應資料,以模拟「網絡延時」,faked 目前支援固定的「延時設定」,參考如下代碼:

當 delay 設定 0 時,将禁用延時。

faked 還可設定 mock api 的最大響應時間,這項設定存在的意義還在于「所有 mock api 的 handler 預設都是異步的,如果忘記「傳回或 send」一個響應結果,請求将會被一直挂起,有了逾時設定,逾時時将會抛出一個錯誤,友善定位問題」,參考如下代碼:

逾時設定和延時設定并不會互相影響,逾時計算是從延時結束後開始的。

faked 除了能 mock 正常的 <code>ajax</code> 和 <code>fetch</code> 請求,還能 mock 常常用來處理跨域問題的 <code>jsonp</code> 請求,faked 有兩個參數用于配置 jsonp,參考如下代碼:

faked 是一個「輔助開發」的工具,除非有特殊需要,一般情況下它不應出現在你的生産代碼中,是以需要注意:

請勿将 faked 放到「生産環境」的應用或頁面中

找一個合适的你項目的方式決定什麼時引用 faked

比如,在 <code>webpak</code> 中,可以根據環境變量決定入口檔案,并隻在 <code>mock</code> 的入口檔案中引用 faked,示例:

webpack.config.js

然後,在 <code>index.mock.js</code> 中這樣寫:

用于存放的 <code>mock</code> 代碼的 <code>mock.js</code> 可能是這樣的:

當然,你可以根據實際情況,安排你的文或目錄結構。

-- end --

繼續閱讀