Node.js伺服器環境下使用Mock.js攔截AJAX請求的教學課程

0、Node環境下安裝和使用Mock

# 安装
npm install mockjs

// 使用 Mock
var Mock = require('mockjs')
var data = Mock.mock({
  // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
  'list|1-10': [{
    // 属性 id 是一个自增数，起始值为 1，每次增 1
    'id|+1': 1
  }]
})
// 输出结果
console.log(JSON.stringify(data, null, 4))

1、攔截 ajax 請求呼叫
方法如下

Mock.mock( rurl?, rtype?, template|function( options ) )

方法說明：
（1）rurl： 可選參數。

表示需要攔截的 URL，可以是 URL 字串或 URL 正規。例如 //domain/list.json/、'/domian/list.json'。
（2）rtype：可選參數。

 表示需要攔截的 Ajax 請求類型。例如 GET、POST、PUT、DELETE 等。
（3）template|function：必選參數，只取其中一項。

（4）template 表示資料模板，可以是物件或字串。例如 { 'data|1-10':[{}] }、'@EMAIL'。
（5）function 指向本次請求的 Ajax 選項集，含有 url、type 和 body 三個屬性，請參閱 XMLHttpRequest 規格。
提示

從 1.0 開始，Mock.js 透過覆寫和模擬原生 XMLHttpRequest 的行為來攔截 Ajax 請求，不再依賴第三方 Ajax 工具庫（例如 jQuery、Zepto 等）。

2. 攔截 Ajax 請求超時
配置攔截 Ajax 請求時的行為。支援的配置項目有：timeout。

（1）Mock.setup( settings )
（2）settings
必選。
配置項集合。
（3）timeout
可選。
指定被攔截的 Ajax 請求的回應時間，單位是毫秒。值可以是正整數，例如 400，表示 400 毫秒 後才會回傳回應內容；也可以是橫槓 '-' 風格的字串，例如 '200-600'，表示回應時間介於 200 和 600 毫秒之間。預設值是'10-100'。

3. 本人理解的攔截
使用同一個方法名，去欄截指定方法。透過 call 修改 this 指向，到達 攔截。

// 实现原理
// 定义父类
var mock_ajax = function(str){
 this.showName=function(){
 console.log(str);
 }
 return this;
};
// 定义子类
var jquery_ajax = function(str){
 this.showName = function(){
 console.log('ajax');
 }
 return this;
};
 
jquery_ajax('').showName();// -> ajax
 
// 改变 this 指向
mock_ajax.call(jquery_ajax,'111');
// 调用
jquery_ajax.showName();

更多Node.js伺服器環境下使用Mock.js攔截AJAX請求的教程相關文章請關注PHP中文網！

相關文章：

解決攔截器對ajax請求的攔截實例詳解

透過JS 攔截全域ajax請求實例解析