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

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中文網其他相關文章！