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 相关文章推荐
getComputedStyle与currentStyle获取样式(style/class)
Mar 19 Javascript
jquery事件与函数的使用介绍
Sep 29 Javascript
JavaScript中的prototype和constructor简明总结
Apr 05 Javascript
JavaScript模块随意拖动示例代码
May 27 Javascript
关闭页面window.location事件未执行的原因及解决方法
Sep 01 Javascript
jQuery表单验证功能实例
Aug 28 Javascript
vue.js系列中的vue-fontawesome使用
Feb 10 Javascript
Vue脚手架的简单使用实例
Jul 10 Javascript
推荐15个最好用的JavaScript代码压缩工具
Feb 13 Javascript
详解Vue路由自动注入实践
Apr 17 Javascript
vue props default Array或是Object的正确写法说明
Jul 30 Javascript
利用React高阶组件实现一个面包屑导航的示例
Aug 23 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
thinkPHP中验证码的简单实现方法
2016/12/05 PHP
php实现生成带二维码图片并强制下载功能
2018/02/24 PHP
js 编写规范
2010/03/03 Javascript
jQuery ready函数滥用分析
2011/02/16 Javascript
使用jQuery同时控制四张图片的伸缩实现代码
2013/04/19 Javascript
JS记录用户登录次数实现代码
2014/01/15 Javascript
javascript正则表达式参数/g与/i及/gi的使用指南
2014/08/27 Javascript
jQuery()方法的第二个参数详解
2015/04/29 Javascript
AngularJS优雅的自定义指令
2016/07/01 Javascript
详解AngularJS验证、过滤器、指令
2017/01/04 Javascript
vue.js实现含搜索的多种复选框(附源码)
2017/03/23 Javascript
es7学习教程之Decorators(修饰器)详解
2017/07/21 Javascript
使用jQuery实现页面定时弹出广告效果
2017/08/24 jQuery
简述vue状态管理模式之vuex
2018/08/29 Javascript
React 项目迁移 Webpack Babel7的实现
2018/09/12 Javascript
node.js爬取中关村的在线电瓶车信息
2018/11/13 Javascript
Element-ui DatePicker显示周数的方法示例
2019/07/19 Javascript
Node.js API详解之 zlib模块用法分析
2020/05/19 Javascript
EXTJS7实现点击拖拉选择文本
2020/12/17 Javascript
[59:07]海涛为你详解DOTA2新版本“贤哲秘契”
2014/11/22 DOTA
跟老齐学Python之深入变量和引用对象
2014/09/24 Python
python实现给数组按片赋值的方法
2015/07/28 Python
python版本的仿windows计划任务工具
2018/04/30 Python
windows下python和pip安装教程
2018/05/25 Python
django admin.py 外键,反向查询的实例
2019/07/26 Python
python批量修改ssh密码的实现
2019/08/08 Python
django框架ModelForm组件用法详解
2019/12/11 Python
在Keras中利用np.random.shuffle()打乱数据集实例
2020/06/15 Python
HTML5中通过li-canvas轻松实现单图、多图、圆角图绘制,单行文字、多行文字等
2018/11/30 HTML / CSS
世界各地的当地人的食物体验:Eatwith
2019/07/26 全球购物
初中同学聚会感言
2014/02/11 职场文书
电子商务专业毕业生自荐书
2014/06/22 职场文书
2014年宣传部工作总结
2014/11/12 职场文书
2014年女职工工作总结
2014/11/27 职场文书
幼儿园新学期开学寄语
2015/05/27 职场文书
电脑关机速度很慢怎么办 提升电脑关机速度设置教程
2022/04/08 数码科技