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

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

引言

Axios是一个基于Promise的HTTP客户端，适用于浏览器和node.js。在项目中，为了提高代码的可维护性和复用性，通常会对Axios进行封装，以便统一管理请求的配置、拦截器、错误处理等。

封装Axios的好处

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

如何封装Axios

1. 创建Axios实例并配置

// http.js
import axios from 'axios';

const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API, // 从环境变量中获取基础URL
timeout: 5000 // 设置请求超时时间
});

export default service;

2. 添加请求拦截器

// 在http.js中继续添加
service.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. 添加响应拦截器

// 在http.js中继续添加
service.interceptors.response.use(
response => {
// 对响应数据做点什么
const res = response.data;
if (res.code !== 200) {
// 处理非200状态码的情况
} else {
return res;
}
},
error => {
// 对响应错误做点什么
if (error.response) {
// 处理响应错误
} else if (error.request) {
// 处理请求错误
} else {
// 处理其他错误
}
return Promise.reject(error);
}
);

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

// 在其他文件中导入封装好的Axios实例
import service from '@/utils/http';

service.get('/some-api-endpoint')
.then(response => {
console.log(response);
})
.catch(error => {
console.error(error);
});

结论

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