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 相关文章推荐
JavaScript中获取元素索引的函数
Sep 10 Javascript
到处都是jQuery选择器的年代 不了解它们的性能,行吗
Jun 18 Javascript
jquery取消选择select下拉框示例代码
Feb 22 Javascript
JavaScript+CSS无限极分类效果完整实现方法
Dec 22 Javascript
js 提交form表单和设置form表单请求路径的实现方法
Oct 25 Javascript
简单理解vue中el、template、replace元素
Oct 27 Javascript
Javascript中click与blur事件的顺序详析
Apr 25 Javascript
最适应的vue.js的form提交涉及多种插件【推荐】
Aug 27 Javascript
微信小程序后台持续定位功能使用详解
Aug 23 Javascript
node.js 使用 net 模块模拟 websocket 握手进行数据传递操作示例
Feb 11 Javascript
js实现直播点击飘心效果
Aug 19 Javascript
vue实现在data里引入相对路径
Jun 05 Vue.js
谈一谈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
用DBSQL类加快开发MySQL数据库程序的速度
2006/10/09 PHP
基于PHP静态类的原罪详解
2013/05/06 PHP
php-fpm配置详解
2014/02/12 PHP
PHP Curl出现403错误的解决办法
2014/05/29 PHP
微信支付PHP SDK ―― 公众号支付代码详解
2016/09/13 PHP
javaScript parseInt字符转化为数字函数使用小结
2009/11/05 Javascript
数组Array进行原型prototype扩展后带来的for in遍历问题
2010/02/07 Javascript
dojo学习第二天 ajax异步请求之绑定列表
2011/08/29 Javascript
JavaScript遍历table表格中的某行某列并打印其值
2014/07/08 Javascript
jquery实现仿Flash的横向滑动菜单效果代码
2015/09/17 Javascript
详解JavaScript的Date对象(制作简易钟表)
2020/04/07 Javascript
jQuery validate插件submitHandler提交导致死循环解决方法
2016/01/21 Javascript
javascript每日必学之继承
2016/02/23 Javascript
js控制TR的显示隐藏
2016/03/04 Javascript
超详细的JS弹出窗口代码大全
2020/04/18 Javascript
AngularJS递归指令实现Tree View效果示例
2016/11/07 Javascript
js原生实现FastClick事件的实例
2016/11/20 Javascript
浅谈JavaScript的函数及作用域
2016/12/30 Javascript
JavaScript实现的冒泡排序法及统计相邻数交换次数示例
2017/04/26 Javascript
微信小程序实现上传图片功能
2018/05/28 Javascript
JavaScript链式调用实例浅析
2018/12/19 Javascript
OpenLayer3自定义测量控件MeasureTool
2020/09/28 Javascript
在主机商的共享服务器上部署Django站点的方法
2015/07/22 Python
python3下实现搜狗AI API的代码示例
2018/04/10 Python
下载python中Crypto库报错:ModuleNotFoundError: No module named ‘Crypto’的解决
2018/04/23 Python
Python学习笔记之读取文件、OS模块、异常处理、with as语法示例
2019/06/04 Python
用python3 返回鼠标位置的实现方法(带界面)
2019/07/05 Python
python已协程方式处理任务实现过程
2019/12/27 Python
促销活动总结报告
2014/04/26 职场文书
个人收入证明范本
2014/09/18 职场文书
2014年干部作风建设总结
2014/10/23 职场文书
导游词怎么写
2015/02/04 职场文书
业务内勤岗位职责
2015/04/13 职场文书
航班延误投诉信
2015/07/02 职场文书
2016年安全月活动总结
2016/04/06 职场文书
用Python制作灯光秀短视频的思路详解
2021/04/13 Python