1. 程式人生 > >Mock.JS攔截HTTP請求實例解析-JS筆記

Mock.JS攔截HTTP請求實例解析-JS筆記

Mock.JS HTTP請求 js筆記

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/

Mock.JS攔截HTTP請求實例解析-JS筆記