Android MOCK HTTP 介面新方式

chay發表於2019-05-28

前言

以往,我們想要模擬介面返回資料,一般是利用 Charles 作為代理中轉,配合線上 MOCK 網站 mocky.io,以模擬介面返回。

charles

一般需要以下幾個步驟:

  1. 下載、安裝 Charles
  2. 手機連線 Charles 代理
  3. 訪問 mock.io 建立模擬資料網址
  4. 使用 Charles 將需要模擬的介面對映到該網址

如果是 HTTPS 請求,手機還需要安裝證書,有些手機安裝證書可能失敗(至今我還沒有成功過),過程將更加繁瑣。

詳細可參考該文章:模擬伺服器返回資料

提升效率

下面,我將介紹一種新的 MOCK 方案,只需一步即可模擬介面返回,而且更加易用。

更加直觀的感受,可以檢視視訊演示

Android MOCK HTTP 介面新方式

實現思路

總體設計

先看下架構設計圖

架構圖

啟動 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 依賴

Android MOCK HTTP 介面新方式

assets 下新建一個 index.html,用於 WEB 頁面展示

Android MOCK HTTP 介面新方式

分為已 MOCK 請求 和未 MOCK 請求兩部分,方便檢視

然後啟動本地 Server

Android MOCK HTTP 介面新方式

/ 匹配根路徑,返回我們剛才在 assets 下建立的 index.html,跑起來試一下

Android MOCK HTTP 介面新方式

服務已經啟動,只不過沒有請求資料展示,接下來我們需要攔截 HTTP 請求,新建一個 OKHTTP Interceptor,在這之前,我們先建立一個 HTTP 請求的管理器,並作為連線本地 Server 和請求攔截器的橋樑

新建一個 data class 用於儲存 HTTP 請求資訊

Android MOCK HTTP 介面新方式

新建一個 HTTP 請求的管理器 MockHttp,也是我們的總入口

Android MOCK HTTP 介面新方式

方法都摺疊了,因為比較簡單,一看註釋就懂了。提供了初始化和銷燬,獲取當前請求的 MOCK 結果,記錄 HTTP 請求,以及提供給本地 Server 的查詢已快取的 HTTP 請求。

接下來終於可以建立 OKHTTP 攔截器了

Android MOCK HTTP 介面新方式

為了不影響後續的流程,我們先 copy 一份 request,記錄下 request 的資訊,從 MockHttp 中查詢改請求的 MOCK 結果,如果沒有,就走後續流程,如果有,就直接返回 MOCK 結果,最後記錄下本次請求資訊,以便我們通過 WEB 瀏覽器檢視。

原生程式碼都已準備就緒,那麼如何把請求資訊展示在 WEB 瀏覽器呢?

嗯這對於一個不懂前端的無線開發者來說的確是一個問題,好在有 W3C 這個菜鳥專屬網站,摸索了一天,終於可以請求和展示資料了。

我們仍然通過本地 Server 提供 API 介面,供 HTML 呼叫,新增如下 API

Android MOCK HTTP 介面新方式

  • /request 返回一個用於展示 HTTP 請求資訊的二級頁面
  • /getRequestList 獲取本地快取的 HTTP 請求資訊列表,用於 / 返回的頁面(即首頁)中呼叫
  • /getRequest 獲取單個 HTTP 請求資訊,用於 /request 返回的頁面中呼叫
  • /mock MOCK 一個 HTTP 請求的響應結果
  • /unmock 有了 MOCK 當然要有取消 MOCK

API 已經準備好,下面到了最“困難”的步驟了,編寫 HTML 程式碼,前端大神可以忽略這部分~

先看首頁,剛才我們已經寫了個簡單地靜態頁面,現在要新增請求資料的程式碼,我們使用 ajax

Android MOCK HTTP 介面新方式

window.onload 回撥中請求介面,分別請求已 MOCK 的請求列表和未 MOCK 的請求列表,然後新增到頁面中

接下來我們要新建一個 request 二級頁面,用於展示請求詳細資訊,以及修改響應結果

Android MOCK HTTP 介面新方式

HTML 依然很簡單,展示請求頭、請求體、響應頭、響應體等,響應體使用 textarea 包裹,可以修改響應結果,傳送 ajax 請求的程式碼就不貼了,和首頁的類似。

MOCK 和取消 MOCK 的請求也是類似的,就不再重複貼程式碼了。

萬事俱備,就差一個 demo 來實踐一下了

我們引用 wanandroid 網站提供的介面,選兩個簡單點的放在 demo 中

Android MOCK HTTP 介面新方式

點選按鈕傳送請求,然後去 WEB 瀏覽器檢視

Android MOCK HTTP 介面新方式

終於看到請求資料了!看一下二級頁面

Android MOCK HTTP 介面新方式

已經可以看到請求的詳細資訊了,我們修改下響應結果,然後點選 MOCK

Android MOCK HTTP 介面新方式

回到 demo 再發一次請求,激動人心的時候到了

Android MOCK HTTP 介面新方式

成功了!!!

結語

至此,我們已經實現了一個不依賴第三方工具的 MOCK 介面外掛,由於是通過 OKHTTP 攔截器實現,因此不區分 HTTP 和 HTTPS。

文章中用到的技術都不難,但卻能讓平時的介面開發除錯效率倍增,希望大家喜歡~

原始碼

我已經將以上程式碼整理封裝為一個庫,原始碼和使用說明可以點選以下連結,歡迎 Star 和 Fork ?

github.com/wangchenyan…

致謝

相關文章