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的让textarea自适应高度的插件
Aug 03 Javascript
javascript使用isNaN()函数判断变量是否为数字
Sep 21 Javascript
JS实现漂亮的淡蓝色滑动门效果代码
Sep 23 Javascript
js中flexible.js实现淘宝弹性布局方案
Jun 23 Javascript
js采用concat和sort将N个数组拼接起来的方法
Jan 21 Javascript
JS实现刷新父页面不弹出提示框的方法
Jun 22 Javascript
手机图片预览插件photoswipe.js使用总结
Aug 25 Javascript
Bootstrap CSS组件之分页(pagination)和翻页(pager)
Dec 17 Javascript
从零学习node.js之利用express搭建简易论坛(七)
Feb 25 Javascript
Vue 2.0+Vue-router构建一个简单的单页应用(附源码)
Mar 14 Javascript
微信小程序 页面滑动事件的实例详解
Oct 12 Javascript
vue+springboot实现登录验证码
May 27 Vue.js
谈一谈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
解析centos中Apache、php、mysql 默认安装路径
2013/06/25 PHP
微信支付PHP SDK ―― 公众号支付代码详解
2016/09/13 PHP
cnblogs中在闪存中屏蔽某人的实现代码
2010/11/14 Javascript
js关闭父窗口时关闭子窗口
2013/04/01 Javascript
JavaScript的事件代理和委托实例分析
2015/03/25 Javascript
网页中JS函数自动执行常用三种方法
2016/03/30 Javascript
详解基于Bootstrap+angular的一个豆瓣电影app
2017/06/26 Javascript
JavaScript在控件上添加倒计时功能的实现代码
2017/07/04 Javascript
vue cli3 调用百度翻译API翻译页面的实现示例
2019/09/13 Javascript
ZK中使用JS读取客户端txt文件内容问题
2019/11/07 Javascript
Vue中keep-alive的两种应用方式
2020/07/15 Javascript
解决VUEX的mapState/...mapState等取值问题
2020/07/24 Javascript
[01:04:01]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS DT第一场
2014/05/24 DOTA
Python字符串替换实例分析
2015/05/11 Python
Python的socket模块源码中的一些实现要点分析
2016/06/06 Python
python使用matplotlib绘制柱状图教程
2017/02/08 Python
Python实现的随机森林算法与简单总结
2018/01/30 Python
Django 忘记管理员或忘记管理员密码 重设登录密码的方法
2018/05/30 Python
详解Python做一个名片管理系统
2019/03/14 Python
详解python selenium 爬取网易云音乐歌单名
2019/03/28 Python
python并发编程多进程 模拟抢票实现过程
2019/08/20 Python
python 协程 gevent原理与用法分析
2019/11/22 Python
tensorflow的计算图总结
2020/01/12 Python
浅谈Python 命令行参数argparse写入图片路径操作
2020/07/12 Python
经典优秀毕业生求职信范文分享
2013/12/18 职场文书
宠物店的创业计划书范文
2014/01/11 职场文书
小学数学教学反思
2014/02/02 职场文书
中介公司区域经理岗位职责范本
2014/03/02 职场文书
毕业自我鉴定总结
2014/03/24 职场文书
员工薪酬激励方案
2014/06/13 职场文书
先进个人申报材料
2014/12/30 职场文书
起诉书范文
2015/05/20 职场文书
小学教育见习总结
2015/06/23 职场文书
教师教育教学随笔
2015/08/15 职场文书
Pycharm 如何设置HTML文件自动补全代码或标签
2021/05/21 Python
MySQL数据库如何给表设置约束详解
2022/03/13 MySQL