JavaScript如何拦截全局Fetch的请求与响应详解
作者：SailingCoder
前言
目前，团队采用了根路径转发的方式，将接口请求转发到服务器上，实现了一定的解耦。然而，随着团队后端策略的变化，现在希望前端直接请求一个新的接口域名，而不再经过中间层的处理。在这种情况下，由于之前的代码中没有对接口请求进行统一的封装，需要考虑如何以最小的成本进行迁移。
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拦截不会导致应用程序的崩溃或不稳定。
附：fetch/xhr和其他请求的区别
fetch/xhr和其他请求（如axios、ajax等）之间的主要区别在于它们的使用方式和一些功能上的不同。
首先，fetch是一种基于Promise的现代化网络请求API，而xhr是一种传统的XMLHttpRequest对象。fetch API基于新的web标准，可以更好地处理请求和响应，支持更多现代化的功能，而xhr则是老旧的方式。
另一个区别在于fetch API返回的是一个Promise对象，可以使用Promise的链式调用和async/await语法，非常方便处理异步操作。而xhr则需要使用回调函数来处理异步操作，代码结构可能相对复杂。
此外，fetch API默认情况下不会携带cookie信息，需要设置credentials属性为"include"才能发送cookie。而xhr默认会发送cookie信息，需要手动设置xhr.withCredentials属性为true来禁止发送cookie。
另外，fetch API在默认情况下只会拒绝请求错误的状态码（如404或500等），而不会拒绝其他的网络错误（如网络超时）。这意味着需要手动检查并处理网络错误。而xhr则可以通过onerror事件来处理所有类型的网络错误。
最后，fetch API在使用上可能相对简单，语法更加直观。而xhr则相对复杂，需要手动设置请求头、处理请求和响应等。
总结起来，fetch/xhr和其他请求的主要区别在于使用方式、功能支持和代码结构等方面。fetch提供了更现代化、更简洁的API，支持Promise和async/await语法，但xhr仍然是一种可靠和广泛使用的老旧方式。
总结
到此这篇关于JavaScript如何拦截全局Fetch的请求与响应的文章就介绍到这了,更多相关js拦截全局Fetch请求和响应内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！