关于Mockjs的原理介绍

来源：动视网责编：小采时间：2020-11-27 19:55:50

关于Mockjs的原理介绍

关于Mockjs的原理介绍:本篇文章给大家分享的内容是关于Mockjs的原理介绍，有着一定的参考价值，有需要的朋友可以参考一下前言有一个前后端分离的项目用到过Mockjs，后端提供了数据格式，前端通过模拟接口的返回数据，进行页面的渲染，有一段时间，百思不得其解，这个插件是怎么把a

推荐度：

点击下载本文 文档为doc格式

导读关于Mockjs的原理介绍:本篇文章给大家分享的内容是关于Mockjs的原理介绍，有着一定的参考价值，有需要的朋友可以参考一下前言有一个前后端分离的项目用到过Mockjs，后端提供了数据格式，前端通过模拟接口的返回数据，进行页面的渲染，有一段时间，百思不得其解，这个插件是怎么把a

本篇文章给大家分享的内容是关于Mockjs的原理介绍，有着一定的参考价值，有需要的朋友可以参考一下

前言

有一个前后端分离的项目用到过Mockjs，后端提供了数据格式，前端通过模拟接口的返回数据，进行页面的渲染，有一段时间，百思不得其解，这个插件是怎么把ajax请求给拦下来的，网上搜索了一番，资料甚少，未果。
后来有一天，不知道怎么的突然想到，如果把ajax方法请求改写了，在发送请求之前提供一个回调是不是能实现这个功能？

思路

准备环境

从最方便的jquery入手，打算改写$.ajax

需要解决的问题主要有

$.ajax即将被改写，所以要自己实现一个发送请求的xhr方法(又懒得写封装的ajax方法，于是把$.ajax缓存起来，以待后用)

如何去匹配将被拦截的请求地址

拦截了请求之后，如何把预先准备好的数据当做请求成功后的数据

代码实现

let Mock = { // 存储匹配规则
 rules: new Map(), // 缓存ajax方法
 ajax: $.ajax,
 mock(url, data) {
 this.rules.set(url, data)
 }
}// 改写ajax方法$.ajax = function(options) {
 Mock.ajax({
 url: options.url,
 beforeSend(XHR) { let data = Mock.rules.get(options.url) // 找到规则拦截请求，并执行回调(return false时会拦截请求)
 data && options.success(data) return !data
 },
 success(data) { // 找不到规则，正常发送请求
 options.success(data)
 }
 })
}// 测试Mock.mock('/a', {
 a: 1,
 b: 2})
$.ajax({
 url: '/a',
 success(data) {
 console.log(data, 1)
 }
})
$.ajax({
 url: '/b',
 success(data) {
 console.log(data, 2)
 }
})

功能检测

以上代码可直接拷贝至控制栏运行，我们可以看到只发送了b请求，a请求被拦截了下来，同时我们也能拿到所预期的数据

至于Mockjs随机数据的功能，我们暂不考虑

总结

之后我也粗略看了下Mockjs源码，它也是改写了jquery和zepto的$.ajax方法所实现，这就意味着如果是自己用原生js封装的ajax方法，是不能拦截的
如下，是一个原生js的ajax方法，有兴趣可以自己去检测一下：

var Ajax={ get: function(url, fn) {
 var xhr = new XMLHttpRequest(); // XMLHttpRequest对象用于在后台与服务器交换数据 
 xhr.open('GET', url, true);
 xhr.onreadystatechange = function() {
 if (xhr.readyState == 4 && xhr.status == 200 || xhr.status == 304) { // readyState == 4说明请求已完成
 fn.call(this, xhr.responseText); //从服务器获得数据
 }
 };
 xhr.send();
 },
 post: function (url, data, fn) { // datat应为'a=a1&b=b1'这种字符串格式，在jq里如果data为对象会自动将对象转成这种字符串格式
 var xhr = new XMLHttpRequest();
 xhr.open("POST", url, true);
 xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); // 添加http头，发送信息至服务器时内容编码类型
 xhr.onreadystatechange = function() {
 if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 304)) { // 304未修改
 fn.call(this, xhr.responseText);
 }
 };
 xhr.send(data);
 }
}

关于Mockjs的原理介绍

推荐度：

点击下载本文 文档为doc格式

标签：介绍 js 简介

热门焦点

关于Mockjs的原理介绍

关于Mockjs的原理介绍

前言

思路

总结

关于Mockjs的原理介绍

最新推荐

猜你喜欢

热门推荐