前言
最近學(xué)習(xí)寫了個(gè)Chrome插件椭员，攔截ajax請(qǐng)求并修改返回結(jié)果状您，幫助你快速mock數(shù)據(jù)排查問(wèn)題例驹。
主要功能
- 支持XMLHttpRequest撩幽、fetch
- 支持正則表達(dá)式库继、HTTP請(qǐng)求方法匹配
- 支持404請(qǐng)求修改響應(yīng)結(jié)果
- 支持返回結(jié)果Json箩艺、JavaScript方式編輯（內(nèi)置mock.js）
- 支持JavaScript方式時(shí)通過(guò)arguments拿到原始接口信息，簡(jiǎn)單編程增加mock場(chǎng)景
項(xiàng)目地址：https://github.com/PengChen96/ajax-tools
使用
支持正則表達(dá)式宪萄、HTTP請(qǐng)求方法匹配
支持404請(qǐng)求修改響應(yīng)結(jié)果
將勾選框勾上就會(huì)將404請(qǐng)求的status改成200
通過(guò)JS編輯返回結(jié)果
代碼是通過(guò)new Function(responseText)生成函數(shù)然后執(zhí)行艺谆，所以JS方式返回結(jié)果就是return的值。
示例：
const data = [];
for (let i = 0; i < 10; i++) {
data.push({ id: i });
}
return {
data
}
支持 mock.js 生成數(shù)據(jù)
示例：
const data = Mock.mock({
// 屬性 list 的值是一個(gè)數(shù)組拜英，其中含有 1 到 10 個(gè)元素
'list|1-10': [{
// 屬性 id 是一個(gè)自增數(shù)静汤，起始值為 1，每次增 1
'id|+1': 1
}]
});
return {
data
}
支持通過(guò)arguments拿到原始接口信息
示例：
let { method, payload, originalResponse } = arguments[0];
if (method === 'get') { // 請(qǐng)求方式
// do something
}
if (payload) { // 入?yún)?{ queryStringParameters居凶，requestPayload }
// do something
}
return originalResponse;
原理
大致就是Chrome擴(kuò)展在加載時(shí)向頁(yè)面中注入js代碼虫给，js代碼會(huì)替換window上的XMLHttpRequest和fetch，新的XMLHttpRequest和fetch會(huì)做一些處理侠碧，根據(jù)匹配的請(qǐng)求路徑抹估，然后將對(duì)應(yīng)的響應(yīng)結(jié)果覆蓋成你設(shè)置的值。支持JS方式編輯是使用了new Function（）去生成函數(shù)然后執(zhí)行舆床。
核心代碼
function myXHR () {
const xhr = new XMLHttpRequest();
// ...
xhr.onreadystatechange = (...args) => {
// 請(qǐng)求完成
if (this.readyState === this.DONE) {
// 覆蓋響應(yīng)結(jié)果
this.responseText = overrideText;
this.response = overrideText;
}
this.onreadystatechange && this.onreadystatechange.apply(this, args);
}
xhr.onload = (...args) => {
// 覆蓋響應(yīng)結(jié)果
// ...
this.onload && this.onload.apply(this, args);
}
// ...
}
插件下載
谷歌商店：https://chrome.google.com/webstore/detail/ajax-interceptor-tools/kphegobalneikdjnboeiheiklpbbhncm
直接下載：https://raw.githubusercontent.com/PengChen96/ajax-tools/master/kphegobalneikdjnboeiheiklpbbhncm.crx
感謝您的閱讀棋蚌，歡迎使用
參考：
https://developer.chrome.com/docs/extensions/mv3/intro/
https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/XMLHttpRequest
https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch
https://github.com/YGYOOO/ajax-interceptor
