社群早已有了mock.js的實作方案，幫助我們實作模拟資料以前後端聯調了，今天自己實作了一個簡易版的mock.js，模拟Ajax和fetch請求
首先我們從使用的角度出發，思考編碼過程
M1. 通過配置檔案配置url和response
M2. 自動檢測環境為開發環境時啟動Mock.js
M3. mock代碼能直接覆寫global.fetch方法或者XMLHttpRequest構造函數，實作開發無感覺
M4. mock配置不影響實際的請求，可無縫切換為實際請求
比較符合我們使用習慣的，也許是下面這種mock方式,有一個專門的配置檔案，管理請求的url和傳回值。每個請求對應輸出數組中的一個對象，對象的rule屬性可以是一個字元串或者一個正規表達式，用來比對url,對象的res屬性則是我們希望的從中請求中拿到的傳回的資料 （也許這裡面還應該加個type表示請求的類型，但是我這個是mock的最簡化版，是以就不加了）
mock配置不影響實際的請求，當請求沒有命中mock配置檔案中的url時，自動切換為實際請求，例如
直接上代碼
配置檔案
測試代碼
測試結果
除了上面的功能外，我們還能做什麼？
加個type類型，區分同一url下的不同請求類型,例如get,post
加個布爾值err,表示失敗的請求
上面這兩個功能再做了我覺得就已經很足夠了，當然，如果你還不滿足，那你還可以嘗試：
處理xhr.open的第三個參數：async值，控制同步和異步
處理xhr的progress,load,error,abort等事件監聽
處理fetch傳回的response的其他方法，例如Body.formData()等等
早在之前我就寫過一篇關于mock.js的文章。這個庫目前在github是13k, 當然我覺得這個庫是很強大的，因為它覆寫了從名字，地名，文章甚至是圖檔資源的mock資料，但是在實際使用中卻多少有那麼一點點“雞肋”的感覺，為什麼我會有這樣一種感覺呢
這是因為它有一套自己的獨立的模闆文法，以及API，需要你學習和遵循
當然mock.js有它自己的好處，例如：
當你需要動态地造大資料量的mock資料的時候很友善，例如mock.js的Random.paragraph的API能很友善的幫你造出來
當你有一些特殊的需求點的時候，例如一個長度寬度變化的圖檔的時候，mock.js也可以很強大的勝任Random.image( size?, background?）
造出來的資料看起來“很漂亮很真實”，單純看完全發現不了是假的資料
但問題在于，我在實際的開發中發現，我們大多數的資料場景根本就沒這麼複雜
我們大多數時候需要的僅僅隻是：寫一個響應資料的模版，例如一個json檔案，然後使得發一個請求過去的時候能在ajax的onreadystatechange或者fetch(url).then中拿到資料就可以了
如果符合我們預期的mock的“完美需求”是100%的話
mock.js這個社群應用實作了80%到99%的需求的過程
但是它的使用方式卻額外增加了30% ～ 40%的成本，
因為，我們大多數時候也許不太需要這麼多的模闆和“看起來很漂亮的資料”
這是我寫這個簡易版的mock的實作的原因
才疏學淺，還多指教，本文完
我叫彭湖灣，請叫我胖灣