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 相关文章推荐
Jquery 获取表单text,areatext,radio,checkbox,select值的代码
Nov 12 Javascript
网页中CDATA标记的说明
Sep 12 Javascript
原生JS实现加入收藏夹的代码
Oct 24 Javascript
jquery 模板的应用示例
Nov 12 Javascript
jquery获取文档高度和窗口高度汇总
Jan 25 Javascript
极力推荐10个短小实用的JavaScript代码段
Aug 03 Javascript
总结js中的一些兼容性易错的问题
Dec 18 Javascript
bootstrap fileinput插件实现预览上传照片功能
Jan 23 Javascript
Angular 封装并发布组件的方法示例
Apr 19 Javascript
vue中过滤器filter的讲解
Jan 21 Javascript
jquery实现下载图片功能
Jul 18 jQuery
uni-app如何实现增量更新功能
Jan 03 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
自己前几天写的无限分类类
2007/02/14 PHP
php列出一个目录下的所有文件的代码
2012/10/09 PHP
使用PHP遍历文件目录与清除目录中文件的实现详解
2013/06/24 PHP
50个PHP程序性能优化的方法
2014/06/02 PHP
php基于Snoopy解析网页html的方法
2015/07/09 PHP
PHP计算加权平均数的方法
2015/07/16 PHP
标准版Eclipse搭建PHP环境的详细步骤
2015/11/18 PHP
php日期操作技巧小结
2016/06/25 PHP
PHP的RSA加密解密方法以及开发接口使用
2018/02/11 PHP
jQuery 位置插件
2008/12/25 Javascript
javascript判断用户浏览器插件安装情况的代码
2011/01/01 Javascript
JS性能优化笔记搜索整理
2013/08/21 Javascript
JavaScript设置首页和收藏页面的小例子
2013/11/11 Javascript
node.js中的events.emitter.removeListener方法使用说明
2014/12/10 Javascript
JQuery中Ajax()的data参数类型实例分析
2015/12/15 Javascript
JS简单随机数生成方法
2016/09/05 Javascript
Javascript自定义事件详解
2017/01/13 Javascript
如何用RxJS实现Redux Form
2018/12/29 Javascript
python中zip和unzip数据的方法
2015/05/27 Python
Python编程实现的简单神经网络算法示例
2018/01/26 Python
pandas 两列时间相减换算为秒的方法
2018/04/20 Python
对Python 窗体(tkinter)树状数据(Treeview)详解
2018/10/11 Python
python3.6 如何将list存入txt后再读出list的方法
2019/07/02 Python
python的re模块使用方法详解
2019/07/26 Python
python2和python3应该学哪个(python3.6与python3.7的选择)
2019/10/01 Python
python中如何使用insert函数
2020/01/09 Python
使用CSS3制作版头动画效果
2020/12/24 HTML / CSS
美国在线家装零售商:Build.com
2016/09/02 全球购物
美国隐形眼镜销售网站:ContactsDirect
2017/10/28 全球购物
英国的一家创新礼品和小工具零售商:Menkind
2019/08/24 全球购物
公务员培训自我鉴定
2013/09/19 职场文书
多媒体编辑专业毕业生推荐信
2013/11/05 职场文书
网上蛋糕店创业计划书
2014/01/24 职场文书
庆元旦主持词
2015/07/06 职场文书
创业计划书之外语培训班
2019/11/02 职场文书
详解MySQL 用户权限管理
2021/04/20 MySQL