目前,团队采用了根路径转发的方式,将接口请求转发到服务器上,实现了一定的解耦。然而,随着团队后端策略的变化,现在希望前端直接请求一个新的接口域名,而不再经过中间层的处理。在这种情况下,由于之前的代码中没有对接口请求进行统一的封装,需要考虑如何以最小的成本进行迁移。
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拦截不会导致应用程序的崩溃或不稳定。