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 Ajax 全解析
Feb 08 Javascript
jQuery easyui datagrid动态查询数据实例讲解
Feb 26 Javascript
Jquery选中或取消radio示例
Sep 29 Javascript
javascript实现rgb颜色转换成16进制格式
Jul 10 Javascript
jQuery使用contains过滤器实现精确匹配方法详解
Feb 25 Javascript
easyUI实现(alert)提示框自动关闭的实例代码
Nov 07 Javascript
jQuery源码分析之init的详细介绍
Feb 13 Javascript
微信小程序实战之仿android fragment可滑动底部导航栏(4)
Apr 16 Javascript
javascript 的变量、作用域和内存问题
Apr 19 Javascript
Vue动态实现评分效果
May 24 Javascript
微信小程序录音实现功能并上传(使用node解析接收)
Feb 26 Javascript
VUE 项目在IE11白屏报错 SCRIPT1002: 语法错误的解决
Sep 27 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的FTP学习(三)
2006/10/09 PHP
php使用sql数据库 获取字段问题介绍
2013/08/12 PHP
PHP中使用imagick生成PSD文件缩略图教程
2015/01/26 PHP
php实现复制移动文件的方法
2015/07/29 PHP
WordPress中查询文章的循环Loop结构及用法分析
2015/12/17 PHP
js 禁用只读文本框获得焦点时的退格键
2010/04/25 Javascript
Jquery操作下拉框(DropDownList)实现取值赋值
2013/08/13 Javascript
JavaScript中的类(Class)详细介绍
2014/12/30 Javascript
js从数组中删除指定值(不是指定位置)的元素实现代码
2016/09/13 Javascript
Bootstrap 轮播(Carousel)插件
2016/12/26 Javascript
angular十大常见问题
2017/03/07 Javascript
vue.js 1.x与2.0中js实时监听input值的变化
2017/03/15 Javascript
Vue.js鼠标悬浮更换图片功能
2017/05/17 Javascript
vue-resource 拦截器(interceptor)的使用详解
2017/07/04 Javascript
Vue中v-for的数据分组实例
2018/03/07 Javascript
使用vue-infinite-scroll实现无限滚动效果
2018/06/22 Javascript
详解如何构建一个Angular6的第三方npm包
2018/09/07 Javascript
angular的输入和输出的使用方法
2018/09/22 Javascript
Vue Echarts实现可视化世界地图代码实例
2019/05/07 Javascript
利用vue-i18n实现多语言切换效果的方法
2019/06/19 Javascript
Vue使用screenfull实现全屏效果
2020/09/17 Javascript
[58:54]EG vs RNG 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
浅谈python可视化包Bokeh
2018/02/07 Python
python调用百度语音识别实现大音频文件语音识别功能
2018/08/30 Python
python机器人运动范围问题的解答
2019/04/29 Python
解决python多行注释引发缩进错误的问题
2019/08/23 Python
Tensorflow分批量读取数据教程
2020/02/07 Python
TensorFlow 多元函数的极值实例
2020/02/10 Python
HTML5 Canvas——用路径描画线条实例介绍
2013/06/09 HTML / CSS
金融管理应届生求职信
2014/02/20 职场文书
2015年度物流工作总结
2015/04/30 职场文书
乡镇党建工作总结2015
2015/05/19 职场文书
原生JavaScript实现简单五子棋游戏
2021/06/28 Javascript
德劲DE1105机评
2022/04/05 无线电
sql server偶发出现死锁的解决方法
2022/04/10 SQL Server
vue配置型表格基于el-table拓展之table-plus组件
2022/04/12 Vue.js