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 相关文章推荐
javawscript 三级菜单的实现原理
Jul 01 Javascript
jQuery-ui中自动完成实现方法
Jun 10 Javascript
javascript控制Div层透明属性由浅变深由深变浅逐渐显示
Nov 12 Javascript
基于mouseout和mouseover等类似事件的冒泡问题解决方法
Nov 18 Javascript
JavaScript/Js脚本处理html元素的自定义属性解析(亲测兼容Firefox与IE)
Nov 25 Javascript
node.js适合游戏后台开发吗?
Sep 03 Javascript
安装使用Mongoose配合Node.js操作MongoDB的基础教程
Mar 01 Javascript
15位和18位身份证JS校验的简单实例
Jul 18 Javascript
jQuery实现获取隐藏div高度的方法示例
Feb 09 Javascript
js实现二级导航功能
Mar 03 Javascript
Angularjs的$http异步删除数据详解及实例
Jul 27 Javascript
Vue 401配合Vuex防止多次弹框的案例
Nov 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
用PHP连接Oracle for NT 远程数据库
2006/10/09 PHP
php Http_Template_IT类库进行模板替换
2009/03/19 PHP
PHP中比较两个字符串找出第一个不同字符位置例子
2014/04/08 PHP
推荐一款PHP+jQuery制作的列表分页的功能模块
2014/10/14 PHP
PHP多线程编程之管道通信实例分析
2015/03/07 PHP
PHP实现下载远程图片保存到本地的方法
2017/06/19 PHP
php根据命令行参数生成配置文件详解
2019/03/15 PHP
判断目标是否是window,document,和拥有tagName的Element的代码
2010/05/31 Javascript
javascript 函数调用的对象和方法
2010/07/01 Javascript
JavaScript中this关键词的使用技巧、工作原理以及注意事项
2014/05/20 Javascript
jquery实现邮箱自动填充提示功能
2015/11/17 Javascript
分享自己用JS做的扫雷小游戏
2016/02/17 Javascript
使用JQuery 加载页面时调用JS的实现方法
2016/05/30 Javascript
jQuery事件详解
2017/02/23 Javascript
Bootstrap面板(Panels)的简单实现代码
2017/03/17 Javascript
JavaScript实现滑动导航栏效果
2017/08/30 Javascript
详解小程序原生使用ES7 async/await语法
2018/08/06 Javascript
angular中两种表单的区别(响应式和模板驱动表单)
2018/12/06 Javascript
vue强制刷新组件的方法示例
2019/02/28 Javascript
js实现飞机大战游戏
2020/08/26 Javascript
解决ant design vue 表格a-table二次封装,slots渲染的问题
2020/10/28 Javascript
python持久性管理pickle模块详细介绍
2015/02/18 Python
详解Python中的日志模块logging
2015/06/19 Python
python数据结构之图深度优先和广度优先实例详解
2015/07/08 Python
利用Python批量提取Win10锁屏壁纸实战教程
2018/03/27 Python
python opencv实现运动检测
2018/07/10 Python
解决Python2.7中IDLE启动没有反应的问题
2018/11/30 Python
对Python3使运行暂停的方法详解
2019/02/18 Python
详解Python是如何实现issubclass的
2019/07/24 Python
关于初始种子自动选取的区域生长实例(python+opencv)
2020/01/16 Python
python实现四人制扑克牌游戏
2020/04/22 Python
Prometheus开发中间件Exporter过程详解
2020/11/30 Python
C语言笔试集
2012/07/24 面试题
公安个人四风问题对照检查及整改措施
2014/10/28 职场文书
HTML通过表单实现酒店筛选功能
2021/05/18 HTML / CSS
HTML怎么设置下划线?html文字加下划线方法
2021/12/06 HTML / CSS