Node.js服务器环境下使用Mock.js拦截AJAX请求的教程


Posted in Javascript onMay 23, 2016

0、Node环境下安装和使用Mock

# 安装
npm install mockjs
// 使用 Mock
var Mock = require('mockjs')
var data = Mock.mock({
  // 属性 list 的值是一个数组,其中含有 1 到 10 个元素
  'list|1-10': [{
    // 属性 id 是一个自增数,起始值为 1,每次增 1
    'id|+1': 1
  }]
})
// 输出结果
console.log(JSON.stringify(data, null, 4))

1、拦截 ajax 请求调用
方法如下

Mock.mock( rurl?, rtype?, template|function( options ) )

方法说明:
(1)rurl: 可选参数。

表示需要拦截的 URL,可以是 URL 字符串或 URL 正则。例如 /\/domain\/list\.json/、'/domian/list.json'。
(2)rtype:可选参数。

 表示需要拦截的 Ajax 请求类型。例如 GET、POST、PUT、DELETE 等。
(3)template|function:必选参数,只取其中一项。

(4)template 表示数据模板,可以是对象或字符串。例如 { 'data|1-10':[{}] }、'@EMAIL'。
(5)function 指向本次请求的 Ajax 选项集,含有 url、type 和 body 三个属性,参见 XMLHttpRequest 规范。
提示

从 1.0 开始,Mock.js 通过覆盖和模拟原生 XMLHttpRequest 的行为来拦截 Ajax 请求,不再依赖于第三方 Ajax 工具库(例如 jQuery、Zepto 等)。

2. 拦截 Ajax 请求超时
配置拦截 Ajax 请求时的行为。支持的配置项有:timeout。

(1)Mock.setup( settings )
(2)settings
必选。
配置项集合。
(3)timeout
可选。
指定被拦截的 Ajax 请求的响应时间,单位是毫秒。值可以是正整数,例如 400,表示 400 毫秒 后才会返回响应内容;也可以是横杠 '-' 风格的字符串,例如 '200-600',表示响应时间介于 200 和 600 毫秒之间。默认值是'10-100'。

3. 本人理解的拦截
使用同一个方法名,去栏截指定方法。通过 call 修改 this 指向,到达 拦截。

// 实现原理
// 定义父类
var mock_ajax = function(str){
 this.showName=function(){
 console.log(str);
 }
 return this;
};
// 定义子类
var jquery_ajax = function(str){
 this.showName = function(){
 console.log('ajax');
 }
 return this;
};

jquery_ajax('').showName();// -> ajax

// 改变 this 指向
mock_ajax.call(jquery_ajax,'111');
// 调用
jquery_ajax.showName();
Javascript 相关文章推荐
Flex通过JS获取客户端IP和计算机名的实例代码
Nov 21 Javascript
node.js+Ajax实现获取HTTP服务器返回数据
Nov 26 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(一)
May 17 Javascript
Javascript中将变量转换为字符串的三种方法
Sep 19 Javascript
vue-scroller记录滚动位置的示例代码
Jan 17 Javascript
浅谈webpack打包过程中因为图片的路径导致的问题
Feb 21 Javascript
浅谈super-vuex使用体验
Jun 25 Javascript
vue实现弹框遮罩点击其他区域弹框关闭及v-if与v-show的区别介绍
Sep 29 Javascript
JavaScript基础之静态方法和实例方法分析
Dec 26 Javascript
小程序测试后台服务的方法(ngrok)
Mar 08 Javascript
Vue 使用beforeEach实现登录状态检查功能
Oct 31 Javascript
基于Vue全局组件与局部组件的区别说明
Aug 11 Javascript
谈一谈bootstrap响应式布局
May 23 #Javascript
JavaScript实现复制或剪切内容到剪贴板功能的方法
May 23 #Javascript
JavaScript的Vue.js库入门学习教程
May 23 #Javascript
详解JavaScript中|单竖杠运算符的使用方法
May 23 #Javascript
AJAX实现瀑布流触发分页与分页触发瀑布流的方法
May 23 #Javascript
jQuery Mobile中的button按钮组件基础使用教程
May 23 #Javascript
jQuery实现页面评论栏中访客信息自动填写功能的方法
May 23 #Javascript
You might like
海贼王:最美的悬赏令!
2020/03/02 日漫
php判断变量类型常用方法
2012/04/24 PHP
深入PHP FTP类的详解
2013/06/13 PHP
php json_encode值中大括号与花括号区别
2013/09/30 PHP
php去除二维数组的重复项方法
2015/11/03 PHP
jQuery的each终止或跳过示例代码
2013/12/12 Javascript
js 绑定键盘鼠标事件示例代码
2014/02/12 Javascript
jQuery中addClass()方法用法实例
2015/01/05 Javascript
轻松使用jQuery双向select控件Bootstrap Dual Listbox
2015/12/13 Javascript
实例详解AngularJS实现无限级联动菜单
2016/01/15 Javascript
通过隐藏iframe实现无刷新上传文件操作
2016/03/16 Javascript
文本溢出插件jquery.dotdotdot.js使用方法详解
2017/06/22 jQuery
JS实现微信摇一摇原理解析
2017/07/22 Javascript
parabola.js抛物线与加入购物车效果的示例代码
2017/10/25 Javascript
Node.js中环境变量process.env的一些事详解
2017/10/26 Javascript
详解一个小实例理解js原型和继承
2019/04/24 Javascript
详解vuejs2.0 select 动态绑定下拉框支持多选
2019/04/25 Javascript
jQuery实现简单评论功能
2020/08/19 jQuery
[47:10]完美世界DOTA2联赛PWL S3 LBZS vs Rebirth 第二场 12.16
2020/12/18 DOTA
Python获取Linux系统下的本机IP地址代码分享
2014/11/07 Python
使用Python的Zato发送AMQP消息的教程
2015/04/16 Python
Python实现给qq邮箱发送邮件的方法
2015/05/28 Python
python判断字符串编码的简单实现方法(使用chardet)
2016/07/01 Python
教你利用Python玩转histogram直方图的五种方法
2018/07/30 Python
使用keras时input_shape的维度表示问题说明
2020/06/29 Python
python实现每天自动签到领积分的示例代码
2020/08/18 Python
Python 内存管理机制全面分析
2021/01/16 Python
10个很棒的 CSS3 开发工具 推荐
2011/05/16 HTML / CSS
世界上最具创新性的增强型知名运动品牌:Proviz
2018/04/03 全球购物
澳大利亚美容产品及化妆品在线:Activeskin
2020/06/03 全球购物
几道数据库的概念性面试题
2014/05/30 面试题
机械专业毕业生自荐信
2013/11/02 职场文书
装潢设计专业推荐信模板
2013/11/26 职场文书
《欢乐的泼水节》教学反思
2014/04/22 职场文书
给学校建议书范文
2014/05/13 职场文书
公司2014年度工作总结
2014/12/10 职场文书