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

Posted 2020-10-26

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变量，而不是全局变量。

在此分享下自己这几个月做的[圆柱模板](http://zhimo.yuanzhumuban.cc/)行业网站：http://zhimo.yuanzhumuban.cc/