在Vue项目中封装axios的最新方法
更新时间：2025年02月21日 10:43:34 作者：全栈若城
这篇文章介绍了axios的基本使用和封装方法,包括设置接口请求前缀、请求头和超时时间、封装请求方法、添加请求和响应拦截器,封装axios可以提高代码质量和可维护性,需要的朋友可以参考下
一、axios简介
axios 是一个基于 XMLHttpRequest 的轻量级HTTP客户端，适用于浏览器和Node.js环境。它提供以下特性：
- 创建XMLHttpRequests和HTTP请求
- 支持 Promise API
- 请求和响应拦截
- 数据转换
- 取消请求
- 自动转换JSON数据
- 客户端XSRF防御
Vue 2.0起，官方推荐使用axios替代vue-resource。
基本使用
安装 axios：
npm install axios --S
或通过CDN引入：
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
在项目中导入并使用：
import axios from 'axios';
axios({
url: 'xxx',
method: 'GET',
params: {
type: '',
page: 1
}
}).then(res => {
console.log(res);
});
并发请求：
axios.all([getUserAccount(), getUserPermissions()])
.then(axios.spread(function (res1, res2) {
// 处理响应
}));
二、封装axios的原因
虽然 axios 的API设计友好，但随着项目规模增长，直接使用 axios 可能会导致以下问题：
- 重复编写配置代码，如超时时间、请求头等。
- 难以维护的冗余代码。
- 缺乏统一的错误处理。
因此，封装axios可以提高代码质量和可维护性。
三、封装axios的方法
1. 设置接口请求前缀
根据不同环境（开发、测试、生产）设置不同的请求前缀：
if (process.env.NODE_ENV === 'development') {
axios.defaults.baseURL = 'http://dev.xxx.com';
} else if (process.env.NODE_ENV === 'production') {
axios.defaults.baseURL = 'http://prod.xxx.com';
}
在 vue.config.js 中配置代理转发以实现跨域：
devServer: {
proxy: {
'/proxyApi': {
target: 'http://dev.xxx.com',
changeOrigin: true,
pathRewrite: {
'^/proxyApi': ''
}
}
}
}
2. 设置请求头和超时时间
创建 axios 实例时，配置通用请求头和超时时间：
const service = axios.create({
timeout: 30000,
headers: {
'Content-Type': 'application/json;charset=utf-8'
}
});
3. 封装请求方法
封装 GET 和 POST 请求方法，便于统一管理和使用：
export function httpGet({ url, params = {} }) {
return new Promise((resolve, reject) => {
axios.get(url, { params }).then(res => resolve(res.data)).catch(err => reject(err));
});
}
export function httpPost({ url, data = {}, params = {} }) {
return new Promise((resolve, reject) => {
axios({ url, method: 'post', data, params }).then(res => resolve(res.data)).catch(err => reject(err));
});
}
将封装的方法放在 api.js 文件中，便于统一管理：
import { httpGet, httpPost } from './http';
export const getorglist = (params = {}) => httpGet({ url: 'apps/api/org/list', params });
在页面中直接调用：
import { getorglist } from '@/assets/js/api';
getorglist({ id: 200 }).then(res => {
console.log(res);
});
4. 添加请求拦截器
在请求拦截器中添加通用逻辑，如设置token：
axios.interceptors.request.use(config => {
const token = localStorage.getItem('token');
token && (config.headers.Authorization = token);
return config;
}, error => Promise.reject(error));
5. 添加响应拦截器
在响应拦截器中处理通用错误和业务逻辑：
axios.interceptors.response.use(response => {
if (response.status === 200) {
// 根据状态码处理业务逻辑
return Promise.resolve(response.data);
} else {
return Promise.reject(response);
}
}, error => {
// 处理错误
return Promise.reject(error);
});
小结
封装 axios 是提升项目代码质量的重要手段。合理的封装不仅能减少重复代码，还能提高代码的可维护性和可读性。封装方案应根据项目需求灵活设计。
到此这篇关于在Vue项目中封装axios的最新方法的文章就介绍到这了,更多相关Vue封装axios内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要为大家详细介绍了Vue实现通知或详情类弹窗，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
vue的核心思想就是组件，什么是组件呢？按照我的理解组件就是装配页面的零件，vue三大核心组件 路由 状态管理，路由控制页面的渲染，页面由组件组成，数据有vuex进行管理和改变。下面我会以一个简单的案例来说2017-04-04
Vue3 $emit用法指南(含选项API、组合API及 setup 语法糖)
这篇文章主要介绍了Vue3 $emit用法指南,使用 emit，我们可以触发事件并将数据传递到组件的层次结构中，本文通过实例代码给大家介绍的非常详细，需要的朋友可以参考下2022-07-07
这篇文章主要介绍了如何设置Vue全局公共方法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
这篇文章主要介绍了部属vue项目,访问路径设置非根,显示白屏的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
使用sessionStorage解决vuex在页面刷新后数据被清除的问题
localStorage没有时间期限，除非将它移除，sessionStorage即会话，当浏览器关闭时会话结束，有时间期限，具有自行百度。本文使用的是sessionStorage解决vuex在页面刷新后数据被清除的问题,需要的朋友可以参考下2018-04-04
本文给大家介绍了在vue项目中使用svg图标的方法，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧2022-04-04
这篇文章主要介绍了vue实现可拖拽div大小的方法,可封装为全局方法在项目中所需要地方直接调用（mixins），本文通过实例代码给大家介绍的非常详细，需要的朋友可以参考下2022-04-04
class 与 style 绑定就是专门用来实现动态样式效果的技术,如果需要动态绑定 class 或 style 样式,可以使用 v-bind 绑定,本文给大家讲解Vue 绑定style和class样式,感兴趣的朋友一起看看吧2023-10-10
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
这篇文章主要介绍了VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2018-11-11
最新评论