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 相关文章推荐
De facto standard 世界上不可思议的事实标准
Aug 29 Javascript
jQuery实战之品牌展示列表效果
Apr 10 Javascript
JS实现字体选色板实例代码
Nov 20 Javascript
解析Javascript中中括号“[]”的多义性
Dec 03 Javascript
JS和Jquery获取和修改label的值的示例代码
Jan 15 Javascript
js获取指定的cookie的具体实现
Feb 20 Javascript
JQuery通过AJAX从后台获取信息显示在表格上并支持行选中
Sep 15 Javascript
浅谈Javascript中substr和substring的区别
Sep 30 Javascript
JavaScript利用HTML DOM进行文档操作的方法
Mar 28 Javascript
在javascript中创建对象的各种模式解析
May 16 Javascript
基于Vuejs和Element的注册插件的编写方法
Jul 03 Javascript
createObjectURL方法实现本地图片预览
Sep 30 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
水质对咖图啡风味的影响具体有哪些
2021/03/03 冲泡冲煮
php下实现农历日历的代码
2007/03/07 PHP
控制PHP的输出:缓存并压缩动态页面
2013/06/11 PHP
php猜单词游戏
2015/09/29 PHP
动态控制Table的js代码
2007/03/07 Javascript
JavaScript对象模型-执行模型
2008/04/28 Javascript
基于jquery的给文章加入关键字链接
2010/10/26 Javascript
基于jQuery的动态表格插件
2011/03/28 Javascript
JQuery 自定义CircleAnimation,Animate方法学习笔记
2011/07/10 Javascript
Jquery 数据选择插件Pickerbox使用介绍
2012/08/24 Javascript
JavaScript立即执行函数的三种不同写法
2014/09/05 Javascript
jQuery()方法的第二个参数详解
2015/04/29 Javascript
基于JavaScript实现一定时间后去执行一个函数
2015/12/14 Javascript
jquery实现瀑布流效果 jquery下拉加载新数据
2016/12/12 Javascript
JS实现微信里判断页面是否被分享成功的方法
2017/06/06 Javascript
js 发布订阅模式的实例讲解
2017/09/10 Javascript
JS实现简单的浮动碰撞效果示例
2017/12/28 Javascript
用jquery获取select标签中选中的option值及文本的示例
2018/01/25 jQuery
angular6.x中ngTemplateOutlet指令的使用示例
2018/08/09 Javascript
原生JS实现前端本地文件上传
2018/09/08 Javascript
Vue项目报错:Uncaught SyntaxError: Unexpected token
2018/11/10 Javascript
JavaScript运动原理基础知识详解
2020/04/02 Javascript
js实现全选和全不选
2020/07/28 Javascript
[07:47]DOTA2国际邀请赛采访专栏:探访Valve总部
2013/08/08 DOTA
python登录QQ邮箱发信的实现代码
2013/02/10 Python
python多进程共享变量
2016/04/06 Python
Python中struct模块对字节流/二进制流的操作教程
2017/01/21 Python
python好玩的项目—色情图片识别代码分享
2017/11/07 Python
python实现zabbix发送短信脚本
2018/09/17 Python
Python使用gRPC传输协议教程
2018/10/16 Python
Python实现批量执行同目录下的py文件方法
2019/01/11 Python
创造美妙香氛体验:Aera扩散器和香水
2018/11/25 全球购物
经济实惠的豪华家具:My-Furniture
2019/03/12 全球购物
《厄运打不垮的信念》教学反思
2014/04/13 职场文书
党员批评与自我批评材料
2014/10/14 职场文书
2014年物业管理工作总结
2014/11/21 职场文书