手摸手带你 mock api

3,334 阅读3分钟

分析

mock api是我们日常开发必不可少的一项工作,业务开发中经常会出现UI做完了,但api还没有好的情况,有的时候甚至要提测了,api还没好,那么产品和测试验收的时候咋办呢?

解决方案

所有的方案都依赖于后端需要先给一个api模板。

一般来说有三种途径:

一、local data

业务熟练的同学model层封装的足够好,getDataFromRemote 和 getDataFromLocal切换自如。

二、local ip

把baseUrl换成本地ip,本地启个端口开个服务,此方案照样轻松。

三、借力工具

本文大力推借力工具的方案,因为前两种基本局限于我们自己操作,产品和测试同学往往会更无力点,charles登场。
大部分同学对charles的印象仅仅局限于抓包看下数据,其实他的功能强的一逼,mock api仅仅是冰山一角。

此次以mock网易新闻的api为例(大家不要做坏事)。

先看看正常的图:

正常

再看看修改后的图–“巴掌来摸摸你的手。”:

修改后的

好的,我介绍两种通过charles的mock方式。

1、Map Local映射url

(1)抓包

https怎么抓我就不赘述了,可以看到体育分类下的api。

抓包

(2)观察response

抓到包后就可以开始分析一下response中的字段,看看我们需要修改哪些字段的值以此达到效果。

观察

(3)粘贴response到便于编辑的编辑器

我这里放到sublime中,保存文件为huangyi,并且修改了ltitle字段的内容。

粘贴

(4)打开Map Local

右键我们刚刚抓下的url即可。

MapLocal

(5)编辑Map Local

打开编辑对话框后主要注意三个地方:

1、path

2、query

3、local path

因为这里Url映射的将会是个绝对的地址,所以大部分情况下我们可以将query删掉,避免一些需要带上时间戳作为参数的api,比如这里的黄易新闻api,我就把query全删了,保留path部分,local path指定之前保存的文件 huangyi。

编辑

(6)Tools中打开Map Local

有的时候mock的api多了,就需要在Tools中打开Map Local,然后再做你需要的操作。

打开

(7)删除Map Local

勾选后remove即可。

删除

2、断点修改值

(1)、(2)、(3)部和上部分一样。
(4)设置断点

点击右键选中BreakPoint。

设置断点

(5)下拉刷新重新请求

但是这里比较尴尬,用断点修改返回值的方法无法做到本次我们想改网易新闻标题的目的,原因就是断点修改没有Local Map灵活,网易新闻的api query一直在变,所以每次下拉都无法catch到,不过不要紧,我们可以直接利用邮件的edit选项把请求参数和之前断点api的所有参数保持一致就行,这样下拉刷新后自然走到了断点处。

(6)修改返回值

最后一步就比较爽了,你在excute前把值修改了,然后点击excute就可以看到想要的效果了。

修改返回值

后话

推荐一个常用的拼json的chrome插件–JSON Editor,是我觉得最好用的mock利器之一,同时作者已开源github.com/josdejong/j…