封装Fetch在项目中使用：提高代码的可维护性和复用性

🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》、《前端求职突破计划》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

引言

Fetch API 是一个现代的、基于 Promise 的网络请求 API，它提供了比 XMLHttpRequest 更简洁和强大的功能。为了提高代码的可维护性和复用性，在项目中通常会对 Fetch 进行封装。

封装 Fetch 的好处

• 统一配置：集中管理基础 URL、超时时间、默认请求头等配置。
• 统一拦截器：集中处理请求和响应的拦截逻辑，如添加认证信息、处理错误状态码等。
• 统一错误处理：集中处理请求过程中可能出现的错误，提供一致的错误处理机制。
• 模块化：封装后的 Fetch 实例可以作为模块导入到不同的文件中使用，提高代码的模块化程度。

如何封装 Fetch

1. 创建 Fetch 实例并配置

// api.js
const api = fetch.create({
baseURL: 'https://api.example.com', // 基础 URL
timeout: 10000, // 超时时间
headers: {
'Content-Type': 'application/json'
}
});

export default api;

2. 添加请求拦截器

// api.js
api.interceptors.request.use(
config => {
// 在发送请求之前做些什么，例如添加 token
const token = localStorage.getItem('token');
if (token) {
config.headers['Authorization'] = `Bearer ${token}`;
}
return config;
},
error => {
// 对请求错误做些什么
return Promise.reject(error);
}
);

3. 添加响应拦截器

// api.js
api.interceptors.response.use(
response => {
// 对响应数据做点什么
if (!response.ok) {
// 处理非 200 状态码的情况
throw new Error(response.statusText);
}
return response.json();
},
error => {
// 对响应错误做点什么
if (error.response) {
// 处理响应错误
} else if (error.request) {
// 处理请求错误
} else {
// 处理其他错误
}
return Promise.reject(error);
}
);

4. 在项目中使用封装好的 Fetch 实例

// 使用示例
import api from './api';

api.get('/data')
.then(response => {
console.log(response);
})
.catch(error => {
console.error(error);
});

api.post('/data', { key: 'value' })
.then(response => {
console.log(response);
})
.catch(error => {
console.error(error);
});

结论

通过封装 Fetch，可以使得网络请求的管理更加集中和高效。这不仅提高了代码的可维护性，也使得错误处理和配置管理更加一致。在实际项目中，根据项目的规模和复杂度，可能还需要进一步定制封装逻辑，比如添加请求取消功能、全局加载状态管理等。

注意：以上代码示例中的 fetch.create 和 interceptors 是假设的 API，实际的 Fetch API 并没有这些方法。在实际封装中，可以使用 axios 或者其他网络请求库来实现拦截器和请求配置的功能。如果一定要使用 Fetch 进行封装，可以通过自定义函数来实现类似的功能。