目前，团队采用了根路径转发的方式，将接口请求转发到服务器上，实现了一定的解耦。然而，随着团队后端策略的变化，现在希望前端直接请求一个新的接口域名，而不再经过中间层的处理。在这种情况下，由于之前的代码中没有对接口请求进行统一的封装，需要考虑如何以最小的成本进行迁移。
Fetch API简介
Fetch API是一种用于进行网络请求和响应的现代Web API。它提供了一种简单、强大且灵活的方式来处理HTTP请求。在使用Fetch API时，我们通常创建一个请求对象，然后使用fetch函数发送请求，并处理返回的Promise。
// GET请求示例：
fetch('https://your.api.com/data')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));
// POST请求示例：
fetch('https://your.api.com/data', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ id: 123, name: 'admin' }),
})
.then(response => response.json())
.then(data => console.log('POST Request:', data))
.catch(error => console.error('POST Request Error:', error));
总体来说，使用Fetch API发送GET和POST请求的基本是相似的，但在POST请求中需要额外处理请求方法和请求体的数据。
注意：尤其是其中 GET 请求代码的极简风格，所以有时为了省事，直接就使用了fetch。这也为后面请求和响应的以及错误处理带来不便性。有的伙伴可能会大面积的去改代码，这样不仅费时间，而且还需要测试，
全局Fetch拦截的需求
在一些情况下，我们可能希望在整个应用程序范围内拦截和处理所有的Fetch请求和响应。这可能是为了添加全局的身份验证、记录请求和响应、处理错误等目的。为了实现这一点，我们可以使用window.fetch来拦截全局的Fetch。
拦截请求
要拦截全局的Fetch请求，我们可以重写window.fetch方法。我们可以在这个方法中添加自定义的逻辑，然后调用原始的fetch方法。下面是一个简单的例子：
const originalFetch = window.fetch;
window.fetch = function(url, options) {
// 添加你的自定义逻辑
console.log('Intercepted request to:', url);
// 调用原始的fetch方法
return originalFetch(url, options);
};
// 使用拦截后的fetch
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));
在上面的例子中，我们简单地在拦截函数中输出了请求的URL，并在最后调用了原始的fetch方法。这样，我们就能在每个全局的Fetch请求之前执行自定义的逻辑。
拦截响应
类似地，我们也可以拦截全局的Fetch响应。这可以让我们在处理响应之前添加一些通用的逻辑，比如检查响应的状态码、处理错误等。
const originalFetch = window.fetch;
window.fetch = function(url, options) {
// 调用原始的fetch方法
return originalFetch(url, options)
.then(response => {
// 添加你的自定义响应逻辑
console.log('Intercepted response from:', url);
// 返回原始的响应
return response;
});
};
// 使用拦截后的fetch
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));
在这个例子中，我们在拦截函数中输出了响应的URL，并在最后返回了原始的响应。这允许我们在处理全局的Fetch响应之前执行自定义的逻辑。
处理错误
在实际应用中，我们还需要考虑到错误处理。如果拦截过程中发生了错误，我们应该能够适当地处理它们，以避免对应用程序的其他部分造成负面影响。
const originalFetch = window.fetch;
window.fetch = function(url, options) {
try {
// 添加你的自定义请求逻辑
console.log('Intercepted request to:', url);
// 调用原始的fetch方法
return originalFetch(url, options)
.then(response => {
// 添加你的自定义响应逻辑
console.log('Intercepted response from:', url);
// 返回原始的响应
return response;
})
.catch(error => {
// 处理全局Fetch响应错误
console.error('Intercepted response error:', error);
throw error;
});
} catch (error) {
// 处理全局Fetch请求错误
console.error('Intercepted request error:', error);
return Promise.reject(error);
}
};
// 使用拦截后的fetch
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));
在上述例子中，我们使用了try和catch块来捕获可能发生的错误，并进行相应的处理。这有助于确保全局Fetch拦截不会导致应用程序的崩溃或不稳定。