前言
以往,我们想要模拟接口返回数据,一般是利用 Charles 作为代理中转,配合在线 MOCK 网站 mocky.io,以模拟接口返回。
一般需要以下几个步骤:
- 下载、安装 Charles
- 手机连接 Charles 代理
- 访问 mock.io 创建模拟数据网址
- 使用 Charles 将需要模拟的接口映射到该网址
如果是 HTTPS 请求,手机还需要安装证书,有些手机安装证书可能失败(至今我还没有成功过),过程将更加繁琐。
详细可参考该文章:模拟服务器返回数据
提升效率
下面,我将介绍一种新的 MOCK 方案,只需一步即可模拟接口返回,而且更加易用。
更加直观的感受,可以查看视频演示
实现思路
总体设计
先看下架构设计图
启动 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 😀
https://github.com/wangchenyan/mock-http