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 相关文章推荐
window.addeventjs事件驱动函数集合addEvent等
Feb 19 Javascript
AJAX使用了UpdatePanel后无法使用alert弹出脚本
Apr 02 Javascript
jquery控制左右箭头滚动图片列表的实例
May 20 Javascript
基于JavaScript实现移动端TAB触屏切换效果
Oct 20 Javascript
详解Angular的双向数据绑定(MV-VM)
Dec 26 Javascript
js将字符串中的每一个单词的首字母变为大写其余均为小写
Jan 05 Javascript
前端开发之CSS原理详解
Mar 11 Javascript
web前端vue之vuex单独一文件使用方式实例详解
Jan 11 Javascript
详解微信小程序审核不通过的解决方法
Jan 17 Javascript
Vue中全局变量的定义和使用
Jun 05 Javascript
JS实现可控制的进度条
Mar 25 Javascript
Vue和React有哪些区别
Sep 12 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
处理php自动反斜杠的函数代码
2010/01/05 PHP
php实现文件下载简单示例(代码实现文件下载)
2014/03/10 PHP
PHP的一个完美GIF等比缩放类,附带去除缩放黑背景
2014/04/01 PHP
在WordPress中实现发送http请求的相关函数解析
2015/12/29 PHP
Thinkphp5行为使用方法汇总
2017/12/21 PHP
原生javascript获取元素样式属性值的方法
2010/12/25 Javascript
JS数组去重与取重的示例代码
2014/01/24 Javascript
解决jQuery动态获取手机屏幕高和宽的问题
2014/05/07 Javascript
php读取sqlite数据库入门实例代码
2014/06/25 Javascript
js中flexible.js实现淘宝弹性布局方案
2020/06/23 Javascript
JS面向对象编程详解
2016/03/06 Javascript
深入理解jQuery事件绑定
2016/06/02 Javascript
BootStrap+Angularjs+NgDialog实现模式对话框
2016/08/24 Javascript
Bootstrap中的fileinput 多图片上传及编辑功能
2016/09/05 Javascript
JS多物体实现缓冲运动效果示例
2016/12/20 Javascript
highcharts 在angular中的使用示例代码
2017/09/20 Javascript
使用veloticy-ui生成文字动画效果
2018/02/08 Javascript
详解VUE 对element-ui中的ElTableColumn扩展
2018/03/28 Javascript
VUE动态生成word的实现
2020/07/26 Javascript
[01:06:59]完美世界DOTA2联赛PWL S2 Magma vs FTD 第一场 11.29
2020/12/02 DOTA
Python datetime时间格式化去掉前导0
2014/07/31 Python
解决python3 urllib 链接中有中文的问题
2018/07/16 Python
python处理“
2019/06/10 Python
pygame实现烟雨蒙蒙下彩虹雨
2019/11/11 Python
python求质数列表的例子
2019/11/24 Python
Python模块 _winreg操作注册表
2020/02/05 Python
Python模拟FTP文件服务器的操作方法
2020/02/18 Python
python实现小程序推送页面收录脚本
2020/04/20 Python
详解Python高阶函数
2020/08/15 Python
HTML5-WebSocket实现聊天室示例
2016/12/15 HTML / CSS
HTML5拖放API实现自动生成相框功能
2020/04/07 HTML / CSS
美国羽绒床上用品第一品牌:Pacific Coast
2018/08/25 全球购物
有机婴儿毛毯和衣服:Monica + Andy
2020/03/01 全球购物
简历中的自我评价怎么写
2014/01/29 职场文书
超市食品安全承诺书
2015/04/29 职场文书
怒海潜将观后感
2015/06/11 职场文书