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 的 prototype问题。
Jan 03 Javascript
Sample script that displays all of the users in a given SQL Server DB
Jun 16 Javascript
JS版元素周期表实现方法
Aug 05 Javascript
js jquery获取当前元素的兄弟级 上一个 下一个元素
Sep 01 Javascript
牛叉的Jquery——Jquery与DOM对象的互相转换及DOM的三种操作
Oct 29 Javascript
js自定义select下拉框美化特效
May 12 Javascript
AngularJs解决跨域问题案例详解(简单方法)
May 19 Javascript
jQuery simpleModal插件的使用介绍
Aug 30 Javascript
使用JS中的Replace()方法遇到的问题小结
Oct 20 Javascript
在微信小程序里使用watch和computed的方法
Aug 02 Javascript
关于AngularJS中ng-repeat不更新视图的解决方法
Sep 30 Javascript
layui扩展上传组件模拟进度条的方法
Sep 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
如何用PHP实现插入排序?
2013/04/10 PHP
php的数组与字符串的转换函数整理汇总
2013/07/18 PHP
php使用sql server验证连接数据库的方法
2014/12/25 PHP
php使用curl伪造来源ip和refer的方法示例
2018/05/08 PHP
ThinkPHP中图片按比例切割的代码实例
2019/03/08 PHP
js multiple全选与取消全选实现代码
2012/12/04 Javascript
JS 各种网页尺寸判断实例方法
2013/04/18 Javascript
jQuery实现鼠标经过提示信息的地图热点效果
2015/04/26 Javascript
JavaScript实现文字跟随鼠标特效
2015/08/06 Javascript
jQuery动画效果相关方法实例分析
2015/12/31 Javascript
jquery实现表格中点击相应行变色功能效果【实例代码】
2016/05/09 Javascript
利用Vue.js实现checkbox的全选反选效果
2017/01/18 Javascript
nodejs操作mysql实现增删改查的实例
2017/05/28 NodeJs
Angular.js中上传指令ng-upload的基本使用教程
2017/07/30 Javascript
layui实现form表单同时提交数据和文件的代码
2019/10/25 Javascript
Vue替代marquee标签超出宽度文字横向滚动效果
2019/12/09 Javascript
基于Cesium绘制抛物弧线
2020/11/18 Javascript
Python排序搜索基本算法之归并排序实例分析
2017/12/08 Python
Python 将pdf转成图片的方法
2018/04/23 Python
python3编写ThinkPHP命令执行Getshell的方法
2019/02/26 Python
Python3.5装饰器典型案例分析
2019/04/30 Python
PyCharm+Qt Designer+PyUIC安装配置教程详解
2019/06/13 Python
python代码打印100-999之间的回文数示例
2019/11/24 Python
python 使用递归的方式实现语义图片分割功能
2020/07/16 Python
使用tkinter实现三子棋游戏
2021/02/25 Python
CSS3 渐变(Gradients)之CSS3 径向渐变
2016/07/08 HTML / CSS
css3的动画特效之动画序列(animation)
2017/12/22 HTML / CSS
马来西亚网上购物:Youbeli
2018/03/30 全球购物
Sneaker Studio法国:购买运动鞋
2018/06/08 全球购物
企业管理专业个人求职信范文
2013/09/24 职场文书
投资意向书
2014/07/30 职场文书
购房委托书
2014/10/15 职场文书
求职意向书范本
2015/05/11 职场文书
《小乌鸦爱妈妈》教学反思
2016/02/19 职场文书
阿里云ECS云服务器快照的概念以及如何使用
2022/04/21 Servers
pandas中pd.groupby()的用法详解
2022/06/16 Python