Mock.js這個(gè)JavaScript庫(kù)最常見(jiàn)的用法便是被用來(lái)攔截AJAX請(qǐng)求,well,這里我們就來(lái)看一下Node.js服務(wù)器環(huán)境下使用Mock.js攔截AJAX請(qǐng)求的教程:

0、Node環(huán)境下安裝和使用Mock

# 安裝

npm install mockjs

// 使用 Mock

var Mock = require('mockjs')

var data = Mock.mock({

  // 屬性 list 的值是一個(gè)數(shù)組，其中含有 1 到 10 個(gè)元素

  'list|1-10': [{

    // 屬性 id 是一個(gè)自增數(shù)，起始值為 1，每次增 1

    'id|+1': 1

  }]

})

// 輸出結(jié)果

console.log(JSON.stringify(data, null, 4))

1、攔截 ajax 請(qǐng)求調(diào)用

方法如下

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

方法說(shuō)明：

（1）rurl： 可選參數(shù)。

表示需要攔截的 URL，可以是 URL 字符串或 URL 正則。例如 /\/domain\/list\.json/、'/domian/list.json'。

（2）rtype：可選參數(shù)。

 表示需要攔截的 Ajax 請(qǐng)求類型。例如 GET、POST、PUT、DELETE 等。

（3）template|function：必選參數(shù)，只取其中一項(xiàng)。

（4）template 表示數(shù)據(jù)模板，可以是對(duì)象或字符串。例如 { 'data|1-10':[{}] }、'@EMAIL'。

（5）function 指向本次請(qǐng)求的 Ajax 選項(xiàng)集，含有 url、type 和 body 三個(gè)屬性，參見(jiàn) XMLHttpRequest 規(guī)范。

提示

從 1.0 開(kāi)始，Mock.js 通過(guò)覆蓋和模擬原生 XMLHttpRequest 的行為來(lái)攔截 Ajax 請(qǐng)求，不再依賴于第三方 Ajax 工具庫(kù)（例如 jQuery、Zepto 等）。

2. 攔截 Ajax 請(qǐng)求超時(shí)

配置攔截 Ajax 請(qǐng)求時(shí)的行為。支持的配置項(xiàng)有：timeout。

（1）Mock.setup( settings )

（2）settings

必選。

配置項(xiàng)集合。

（3）timeout

可選。

指定被攔截的 Ajax 請(qǐng)求的響應(yīng)時(shí)間，單位是毫秒。值可以是正整數(shù)，例如 400，表示 400 毫秒 后才會(huì)返回響應(yīng)內(nèi)容；也可以是橫杠 '-' 風(fēng)格的字符串，例如 '200-600'，表示響應(yīng)時(shí)間介于 200 和 600 毫秒之間。默認(rèn)值是'10-100'。

3. 本人理解的攔截

使用同一個(gè)方法名，去欄截指定方法。通過(guò) call 修改 this 指向，到達(dá) 攔截。

// 實(shí)現(xiàn)原理

// 定義父類

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');

// 調(diào)用

jquery_ajax.showName();