JSRUN
Mockjs 语法规范由数据模板定义规范和数据占位符定义规范组成,在官网的 示例文档 中提供了丰富的模板定义方法,可点击查看
Mockjs 实现的原理是对 XHR 对象的拦截,属于 js 拦截,并没有通过浏览器发出请求,所以一般会碰到以下问题。
为了处理以上问题,引入集成了 mockjs 的 mock server工具 easy-mock ,注册并登录 easy-mock 官网后,会有一个演示项目提供参考,参考演示项目可以轻松创建自己的项目,如下图
创建项目后可以基于当前项目创建请求接口,如下图,创建一个 url 为 \user 的 get 请求,会生成接口为 https://www.easy-mock.com/mock/5b97a508b158375129f1b724/hello/user 的完整地址,点击 用户列表 可查看返回数据,由于 easy-mock 内部集成了 mockjs ,所以在生成数据时可以采用mockjs数据模板来生成,把基础用法中的数据生成模板粘贴过来,可以生成相同数据
浏览器限制跨域访问,所以要访问到接口数据,还需要解决跨域问题,通过 Nginx 解决跨域我在另外一片文章有讨论过,点击可以可查,下面主要介绍下通过 webpack-dev-server 设置代理
假设本地请求的根路径为 http://localhost:8080 ,通过 ajax 请求 用户列表 的完整接口为 http://localhost:8080/proxy/user , webpack-dev-server 通过代理方式将请求转发到我们在 easy-mock 中定义的接口 https://www.easy-mock.com/mock/5b97a508b158375129f1b724/hello/proxy/user ,此时接口地址中多了个代理标志 /proxy , 通过配置参数 pathRewrite: {'^/proxy': ' '} 将 /proxy 去掉即可。
源代码执行时估计是不好改。你在断点中断执行时,可以在控制台, 输入一些JS语句,修改变量的值,然后再取消断点,继续执行原代码,就能达到同样的目标。如何才能做到IE浏览器JS脚本拦截并修改本博客原始地址: http://www.jianshu.com/p/9b634f1c9615
Ajax-hook源码地址 : https://github.com/wendux/Ajax-hook 欢迎star
ok, 我们使用jQuery(v3.1) 的get方法来测一下:
结果 :
拦截成功了! 我们也可以看到jQuery3.1内部已经放弃onreadystatechange而改用onload了。
假设在webpack下,第一步, 安装ajax-hook npm插件
第二步,引入模块并调用api:
拦截所有ajax请求,检测请求method,如果是“GET”,则中断请求并给出提示
拦截所有ajax请求,请求统一添加时间戳
修改请求返回的数据“responseText”
结果:
有了这些示例,相信开篇提到的需求都很容易实现。最后测一下unHook
输出:
相关链接:
Ajax-hook原理解析: http://www.jianshu.com/p/7337ac624b8e
BY THE WAY : 欢迎关注、star我的另一个开源项目 Neat.js !