Android MOCK HTTP 接口新方式

前言

以往,咱们想要模拟接口返回数据,通常是利用 Charles 做为代理中转,配合在线 MOCK 网站 mocky.io,以模拟接口返回。html

charles

通常须要如下几个步骤:前端

  1. 下载、安装 Charles
  2. 手机链接 Charles 代理
  3. 访问 mock.io 建立模拟数据网址
  4. 使用 Charles 将须要模拟的接口映射到该网址

若是是 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 固然要有取消 MOCK

API 已经准备好,下面到了最“困难”的步骤了,编写 HTML 代码,前端大神能够忽略这部分~

先看首页,刚才咱们已经写了个简单地静态页面,如今要添加请求数据的代码,咱们使用 ajax

window.onload 回调中请求接口,分别请求已 MOCK 的请求列表和未 MOCK 的请求列表,而后添加到页面中

接下来咱们要新建一个 request 二级页面,用于展现请求详细信息,以及修改响应结果

HTML 依然很简单,展现请求头、请求体、响应头、响应体等,响应体使用 textarea 包裹,能够修改响应结果,发送 ajax 请求的代码就不贴了,和首页的相似。

MOCK 和取消 MOCK 的请求也是相似的,就再也不重复贴代码了。

万事俱备,就差一个 demo 来实践一下了

咱们引用 wanandroid 网站提供的接口,选两个简单点的放在 demo 中 )

点击按钮发送请求,而后去 WEB 浏览器查看

终于看到请求数据了!看一下二级页面

已经能够看到请求的详细信息了,咱们修改下响应结果,而后点击 MOCK

回到 demo 再发一次请求,激动人心的时候到了

成功了!!!

结语

至此,咱们已经实现了一个不依赖第三方工具的 MOCK 接口插件,因为是经过 OKHTTP 拦截器实现,所以不区分 HTTP 和 HTTPS。

文章中用到的技术都不难,但却能让平时的接口开发调试效率倍增,但愿你们喜欢~

源码

我已经将以上代码整理封装为一个库,源码和使用说明能够点击如下连接,欢迎 Star 和 Fork 😀

github.com/wangchenyan…

致谢

相关文章
相关标签/搜索