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滚动组件(vticker.js)实现页面动态数据的滚动效果
Jul 03 Javascript
用原生JS获取CLASS对象(很简单实用)
Oct 15 Javascript
javascript中日期函数new Date()的浏览器兼容性问题
Sep 05 Javascript
javascript常用函数(1)
Nov 04 Javascript
Bootstrap每天必学之按钮
Nov 26 Javascript
JS实现兼容各种浏览器的高级拖动方法完整实例【测试可用】
Jun 21 Javascript
小程序自定义导航栏兼容适配所有机型(附完整案例)
Apr 26 Javascript
解决vue prop传值default属性如何使用,为何不生效的问题
Sep 21 Javascript
js实现详情页放大镜效果
Oct 28 Javascript
三剑客:offset、client和scroll还傻傻分不清?
Dec 04 Javascript
javascript前端实现多视频上传
Dec 13 Javascript
Ajax是什么?Ajax高级用法之Axios技术
Apr 21 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面向对象全攻略 (十五) 多态的应用
2009/09/30 PHP
又一个PHP实现的冒泡排序算法分享
2014/08/21 PHP
Thinkphp中的curd应用实用要点
2015/01/04 PHP
php数组键名技巧小结
2015/02/17 PHP
基于PHP实现简单的随机抽奖小程序
2016/01/05 PHP
PHP的Json中文处理解决方案
2016/09/29 PHP
php 提交表单 关闭layer弹窗iframe的实例讲解
2018/08/20 PHP
Yii框架函数简单用法分析
2019/09/09 PHP
JavaScript 滚轮事件使用说明
2010/03/07 Javascript
一个简单的网站访问JS计数器 刷新1次加1次访问
2012/09/20 Javascript
js获取当月最后一天实例代码
2013/11/19 Javascript
JavaScript中的Promise使用详解
2015/06/24 Javascript
Vue.js仿Metronic高级表格(二)数据渲染
2017/04/19 Javascript
Javascript网页抢红包外挂实现分享
2018/01/11 Javascript
详解给Vue2路由导航钩子和axios拦截器做个封装
2018/04/10 Javascript
vue.js绑定事件监听器示例【基于v-on事件绑定】
2018/07/07 Javascript
微信小程序移动拖拽视图-movable-view实例详解
2019/08/17 Javascript
vue中template的三种写法示例
2020/10/21 Javascript
Python搭建HTTP服务器和FTP服务器
2017/03/09 Python
讲解Python3中NumPy数组寻找特定元素下标的两种方法
2019/08/04 Python
解决Django layui {{}}冲突的问题
2019/08/29 Python
Django celery异步任务实现代码示例
2020/11/26 Python
HTML5之web workers_动力节点Java学院整理
2017/07/17 HTML / CSS
马来西亚排名第一的宠物用品店:Pets Wonderland
2020/04/16 全球购物
如何防止同一个帐户被多人同时登录
2013/08/01 面试题
英文版银行求职信
2013/10/09 职场文书
劳动竞赛活动方案
2014/02/20 职场文书
大学生就业意向书范文
2014/04/01 职场文书
婚前协议书标准版
2014/10/19 职场文书
新党章的学习心得体会
2014/11/07 职场文书
初三语文教学计划
2015/01/22 职场文书
工作收入证明范本
2015/06/12 职场文书
如何写通讯稿
2015/07/22 职场文书
学校学期工作总结
2015/08/13 职场文书
2019最新版试用期劳动合同模板!
2019/07/04 职场文书
总结几个非常实用的Python库
2021/06/26 Python