首页  >  文章  >  web前端  >  Mock.JS拦截HTTP请求实例解析

Mock.JS拦截HTTP请求实例解析

小云云
小云云原创
2018-03-06 14:45:414217浏览


MockJS是一种比较通用的前端模拟HTTP请求及回复的工具,能够仿真处各类HTTP的请求及返回结果。实现在无后端的情况下,前端对于后端接口的仿真。Mock的基础使用也是比较简单,本文我们主要和大家分享Mock.JS拦截HTTP请求实例解析,希望能帮助到大家。

但,在引入MockJS时,

import Mock from 'mockjs'

会拦截所有前端发出的HTTP请求,无论是否使用Mock.mock开启Mock仿真,都会拦截HTTP请求。
这也就是为何,就算不Mock.mock也会后端无法获取前端HTTP请求的原因。

因此,一旦引用mockjs的情况下,无法通过前端发出HTTP请求,而会被mockjs拦截

需要在npm run build之前,先去除对于mockjs的引用。

Dev环境和Release环境下Mock的引用

import global from '../src/common/global';if (global.env === 'dev'){    var Mock = require('mockjs');
}if (global.env === 'dev'){    //Run MOCK 
    for (let mockData of mockDatas){        //console.log(mockData);
        Mock.mock(mockData.url, mockData.data);
    }
}

仅在Dev开发环境下global.env === 'dev',引入Mockjs,以免在release的版本中,真正的HTTP请求被拦截。

此处的global为自定义的全局config变量,而不是全局变量。

Mock.JS拦截HTTP请求的问题

MockJS是一种比较通用的前端模拟HTTP请求及回复的工具,能够仿真处各类HTTP的请求及返回结果。实现在无后端的情况下,前端对于后端接口的仿真。Mock的基础使用也是比较简单:Mock.JS官网
但,在引入MockJS时,

import Mock from 'mockjs'

会拦截所有前端发出的HTTP请求,无论是否使用Mock.mock开启Mock仿真,都会拦截HTTP请求。
这也就是为何,就算不Mock.mock也会后端无法获取前端HTTP请求的原因。

因此,一旦引用mockjs的情况下,无法通过前端发出HTTP请求,而会被mockjs拦截

需要在npm run build之前,先去除对于mockjs的引用。

Dev环境和Release环境下Mock的引用

import global from '../src/common/global';if (global.env === 'dev'){    var Mock = require('mockjs');
}if (global.env === 'dev'){    //Run MOCK 
    for (let mockData of mockDatas){        //console.log(mockData);
        Mock.mock(mockData.url, mockData.data);
    }
}

仅在Dev开发环境下global.env === 'dev',引入Mockjs,以免在release的版本中,真正的HTTP请求被拦截。

此处的global为自定义的全局config变量,而不是全局变量。

相关推荐:

使用 mock.js 让前端开发与后端独立

mock.js随机数据和使用express输出json接口实例教程

Node.js服务器环境下使用Mock.js拦截AJAX请求的教程

以上是Mock.JS拦截HTTP请求实例解析的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn