背景
为了满足老板的需求，需要往公司采购的一个第三方系统里注入脚本，拦截所有的请求，支持修改请求参数和响应参数。
所谓的注入脚本，就是往index.html里插入script标签，执行相应的代码，可以通过nginx去实现。
因第三方系统用的都是fetch请求，所以本文主要讲解fetch请求的拦截
在实现拦截器之前，先回顾一下Fetch的用法
Fetch基本使用
fetch等同于我们常用的XMLHttpRequest，用来发送HTTP请求获取资源，但Fetch设计得更加简洁易用，并基于Promise实现，解决了XMLHttpRequest的回调地狱问题
语法
Promise<Response> fetch(input[, init]);
参数
fetch方法接收两个参数：
- input 可以是字符串或者
Request对象 - init（可选）一个配置项对象，包括所有对请求的设置
返回值
fetch方法会返回一个Promise，resolve时回传Response对象
示例
// GET请求
fetch('http://example.com/movies.json?name=example')
.then(res => res.json)
.then(data => console.log(data))
// POST请求
const data = { username: 'example' };
fetch('https://example.com/profile', {
method: 'POST', // or 'PUT'
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(data),
})
.then(response => response.json())
.then(data => {
console.log('Success:', data);
})
.catch((error) => {
console.error('Error:', error);
});
// Request对象
let request = new Request('http://example.com/movies.json', {
method: 'POST',
body: '{name: example}'
})
fetch(request).then(res => res.json)
Request第二个参数和fetch方法的init参数一致
拦截器设计
拦截器的目的是在原生的fetch基础之上，新增拦截请求的功能。所以我们可以重新写一个fetch方法，让window.fetch = hijackFetch。这样第三方系统里调用fetch方法，就会走到hijackFetch里
从fetch的语法和参数来看，我们可以知道：
- fetch是一个函数
- 接收两个参数，第一个参数定义要获取的资源（也可以是Request对象）。第二个参数为可选项，一个配置项对象，包括所有对请求的设置；
- 返回结果是一个promise对象。
在实现hijackFetch前，我们先来思考如何添加拦截器，这里参考axios的拦截器用法
// 请求拦截
hijackFetch.interceptor.request.use('/api/example', function(request) {
// do something
return request
})
// 响应拦截
hijackFetch.interceptor.response.use('/api/example', function(response) {
// do something
return response
})
和axios的拦截器不同，因为业务需求不需要对所有的fetch请求进行拦截，仅针对某几个特定的接口拦截，所以拦截器接收两个参数：
- 接口地址
- 回调函数
代码框架
var request = (function() {
var originalFetch = window.fetch;
var interceptor_req = {
// url1: [callback1, callback2,...],
// url2: []
};
var interceptor_res = {
// url1: [callback1, callback2,...],
// url2: []
};
function hijackFetch() {
// ...
}
hijackFetch.interceptor = {
// 请求拦截
request: {
use: function(url, callback) {
// ...
}
},
// 响应拦截
response: {
use: function(url, callback) {
// ...
}
}
}
return {
hijackFetch: hijackFetch
}
})()
主要思路：
维护interceptor_req和interceptor_res两个对象，数据结构为
{url: [callback]}的形式。调用拦截器的use方法时，将callback函数push到对应的队列里。
在发起请求前和获取响应后执行该请求对应的callback队列，修改request和response
完整代码
var qbi_request = (function () {
var originalFetch = window.fetch;
var originalRequest = window.Request;
// Request实例取不到body参数
function Request(input, init){
this.input = input;
this.init = init;
this.req = new originalRequest(input, init);
for(var key in this.req){
this[key] = this.req[key];
}
}
window.Request = Request;
var interceptor_req = {};
var interceptor_res = {};
function getPath(url) {
return url.split("?")[0]
}
function hijackFetch() {
var request = null
if(typeof arguments[0] === 'string') {
request = new Request(arguments[0], arguments[1] || {})
} else {
request = new Request(arguments[0].input, arguments[0].init)
}
var path = getPath(request.input)
if(interceptor_req[path]) {
// 清空队列，避免跳转页面后，重复执行callback
// 这里的循环是请求拦截的关键代码，循环执行拦截器的回调方法，修改request
while(fn = interceptor_req[path].shift()) {
request = fn(request)
}
}
return new Promise((resolve, reject) => {
originalFetch(request.input, request.init)
.then((res) => {
var path = getPath(request.input)
if(interceptor_res[path]) {
// 这里的循环是响应拦截的关键代码，循环执行拦截器的回调方法，修改res
while(fn = interceptor_res[path].shift()) {
res = fn(res)
}
}
resolve(res);
})
.catch((err) => {
reject(err);
});
});
}
hijackFetch.interceptor = {
request: {
use: function (url, callback) {
if(interceptor_req[url]) {
interceptor_req[url].push(callback)
} else {
interceptor_req[url] = [callback]
}
},
},
response: {
use: function (url, callback) {
if(interceptor_res[url]) {
interceptor_res[url].push(callback)
} else {
interceptor_res[url] = [callback]
}
},
},
};
window.fetch = hijackFetch;
return {
hijackFetch: hijackFetch,
};
})();
通过Request调用fetch方法的话，Request实例获取不到body对象，即获取不到请求参数，这样拦截也没有意义。所以对Request这个类也进行了重写，新增init属性，在new Request时将参数保存起来
