以往,咱們想要模擬接口返回數據,通常是利用 Charles 做爲代理中轉,配合在線 MOCK 網站 mocky.io,以模擬接口返回。html
通常須要如下幾個步驟:前端
若是是 HTTPS 請求,手機還須要安裝證書,有些手機安裝證書可能失敗(至今我尚未成功過),過程將更加繁瑣。android
詳細可參考該文章:模擬服務器返回數據git
下面,我將介紹一種新的 MOCK 方案,只需一步便可模擬接口返回,並且更加易用。github
更加直觀的感覺,能夠查看視頻演示ajax
先看下架構設計圖瀏覽器
啓動 MOCK-HTTP 後,註冊 OKHTTP 攔截器,MOCK-HTTP 會啓動一個本地 Server,監聽請求。緩存
APP 發送網絡請求,會到攔截器處理,攔截器向 MOCK-HTTP 查詢該路徑是否有 MOCK 響應,若是有就偷天換日,返回 MOCK 數據,不然不攔截該請求,最後記錄下該次請求的數據,通知 MOCK-HTTP 保存。服務器
使用 WEB 瀏覽器訪問本機 IP 和對應端口,本地 Server 向 MOCK-HTTP 查詢後返回當前緩存的請求數據,點擊某條請求能夠查看和修改響應結果,點擊修改後本地 Server 通知 MOCK-HTTP 保存 MOCK 數據。網絡
先說下背景,一直苦於沒法方便的 MOCK 接口,偶然間想到鴻神的一篇頗有意思的文章解決一位羣友問題 Android上的隔空取物,能夠實現局域網中的其餘設備能夠和 APP 通訊。
受到這篇文章的啓發,咱們可不能夠經過 WEB 瀏覽器向 APP 發送請求,設置接口 MOCK 數據,APP 中經過攔截請求,達到 MOCK 的目的?
有了想法就開始幹!
項目建好,添加 AndroidAsync 依賴
assets 下新建一個 index.html
,用於 WEB 頁面展現
分爲已 MOCK 請求 和未 MOCK 請求兩部分,方便查看
而後啓動本地 Server
/
匹配根路徑,返回咱們剛纔在 assets 下建立的 index.html
,跑起來試一下
服務已經啓動,只不過沒有請求數據展現,接下來咱們須要攔截 HTTP 請求,新建一個 OKHTTP Interceptor,在這以前,咱們先建立一個 HTTP 請求的管理器,並做爲鏈接本地 Server 和請求攔截器的橋樑
新建一個 data class
用於保存 HTTP 請求信息
新建一個 HTTP 請求的管理器 MockHttp
,也是咱們的總入口
方法都摺疊了,由於比較簡單,一看註釋就懂了。提供了初始化和銷燬,獲取當前請求的 MOCK 結果,記錄 HTTP 請求,以及提供給本地 Server 的查詢已緩存的 HTTP 請求。
接下來終於能夠建立 OKHTTP 攔截器了
爲了避免影響後續的流程,咱們先 copy 一份 request
,記錄下 request
的信息,從 MockHttp
中查詢改請求的 MOCK 結果,若是沒有,就走後續流程,若是有,就直接返回 MOCK 結果,最後記錄下本次請求信息,以便咱們經過 WEB 瀏覽器查看。
本地代碼都已準備就緒,那麼如何把請求信息展現在 WEB 瀏覽器呢?
嗯這對於一個不懂前端的無線開發者來講的確是一個問題,好在有 W3C 這個菜鳥專屬網站,摸索了一天,終於能夠請求和展現數據了。
咱們仍然經過本地 Server 提供 API 接口,供 HTML 調用,新增以下 API
/request
返回一個用於展現 HTTP 請求信息的二級頁面/getRequestList
獲取本地緩存的 HTTP 請求信息列表,用於 /
返回的頁面(即首頁)中調用/getRequest
獲取單個 HTTP 請求信息,用於 /request
返回的頁面中調用/mock
MOCK 一個 HTTP 請求的響應結果/unmock
有了 MOCK 固然要有取消 MOCKAPI 已經準備好,下面到了最「困難」的步驟了,編寫 HTML 代碼,前端大神能夠忽略這部分~
先看首頁,剛纔咱們已經寫了個簡單地靜態頁面,如今要添加請求數據的代碼,咱們使用 ajax
在 window.onload
回調中請求接口,分別請求已 MOCK 的請求列表和未 MOCK 的請求列表,而後添加到頁面中
接下來咱們要新建一個 request
二級頁面,用於展現請求詳細信息,以及修改響應結果
HTML 依然很簡單,展現請求頭、請求體、響應頭、響應體等,響應體使用 textarea
包裹,能夠修改響應結果,發送 ajax
請求的代碼就不貼了,和首頁的相似。
MOCK 和取消 MOCK 的請求也是相似的,就再也不重複貼代碼了。
萬事俱備,就差一個 demo 來實踐一下了
咱們引用 wanandroid
網站提供的接口,選兩個簡單點的放在 demo 中 )
點擊按鈕發送請求,而後去 WEB 瀏覽器查看
終於看到請求數據了!看一下二級頁面
已經能夠看到請求的詳細信息了,咱們修改下響應結果,而後點擊 MOCK
回到 demo 再發一次請求,激動人心的時候到了
成功了!!!
至此,咱們已經實現了一個不依賴第三方工具的 MOCK 接口插件,因爲是經過 OKHTTP 攔截器實現,所以不區分 HTTP 和 HTTPS。
文章中用到的技術都不難,但卻能讓平時的接口開發調試效率倍增,但願你們喜歡~
我已經將以上代碼整理封裝爲一個庫,源碼和使用說明能夠點擊如下連接,歡迎 Star 和 Fork 😀