调试 whistle 手把手调试mock数据

2020-06-03 | 阅读：次

调试 whistle 手把手调试mock数据

开发思维周日报时正好用到，在此总结一下。

现状以及问题：

在我们的vue项目里，可以通过proxy去代理到targe地址访问，但是我们targe的一般都是不同环境下的接口数据。

之前也配置过单独target到专门的mock数据地址，但是mock的数据，针对整个项目而言往往是不全的，涉及到登录或者一些页面交互有的可能就缺了，所以更多时候是单独针对某一个请求，开发期间去改成mock的地址，但是要发布测试的时候，还得再改回来，记得还好，不记得发布测试出问题又得再改一次，还是稍微有点麻烦的。

使用whistle代理mock数据：

我们的mock数据是在 yapi 平台上创建的，我觉得也是很不错的，文档清晰直观，体验也还可以。

先看一下没用whistle代理之前的，我请求的URL是：http://test.imonkey.xueersi.com/app/api/v1/report/daily-normal?class_id=384&user_id=2121&subject_id=2

而我们需要代理到yapi的mock访问地址是：http://yapi.talbrain.com/mock/546/app/api/v1/report/daily-normal?class_id=1

那我在whistle的规则配置里可以直接写成：

http://test.imonkey.xueersi.com/app/api/v1/report/daily-normal?class_id=384&user_id=2121&subject_id=2 http://yapi.talbrain.com/mock/546/app/api/v1/report/daily-normal?class_id=1 但是这样写就是精准匹配后面的参数，万一换个账号就失效了，所以需要改成正则匹配的形式

/http://test.imonkey.xueersi.com/app/api/v1/report/daily-normal?/ http://yapi.talbrain.com/mock/546/app/api/v1/report/daily-normal?class_id=1

刷新页面，看下network面板的情况

可以看到匹配到的地址加粗显示了，右边inspectors里可以看到请求的URL地址，以及Host实际访问的地址，可以看到Response返回的数据是跟yapi文档的mock数据是一致的。

可以在network面板下方黑条写入过滤关键词，这样就只显示关注的请求了。

而且还有个OPTIONS请求（一般用来跨域请求询问），发现这个也被匹配修改了，也有了返回请求数据，如图所示

那么我们如何只针对有效的请求进行匹配呢？whistle也能做到，提供了 resScript 规则配置，

我们把上面的规则修改一下：

/http://test.imonkey.xueersi.com/app/api/v1/report/daily-normal?/  reqScript://{getRule}

Values 中创建一个 getRule:

if (method === 'GET') {
    rules.push('/http://test.imonkey.xueersi.com/app/api/v1/report/daily-normal?/ http://yapi.talbrain.com/mock/546/app/api/v1/report/daily-normal?class_id=1');
}