vue自定义axios

2025-03-16 0 16

Image

《vue自定义axios》

在Vue项目中,为了方便地发起HTTP请求并与后端进行数据交互,通常会使用Axios库。直接使用Axios可能会遇到一些问题,例如需要频繁地配置请求的基准URL、处理请求和响应等。为了解决这些问题,我们可以自定义一个基于Axios的封装,以提高代码的可维护性和复用性。

一、解决方案

通过创建一个单独的文件(如http.js),在这个文件里对Axios进行实例化,并设置好全局的配置,如基础URL、超时时间等。同时添加请求和响应来处理请求头、错误提示等通用逻辑。这样,在组件或其他地方使用时,只需要导入这个自定义的Axios实例即可轻松发起请求。

二、思路一:基础配置与

安装Axios:
bash
npm install axios

然后创建http.js文件:
```javascript
import axios from 'axios';

// 创建axios实例
const service = axios.create({
baseURL: process.env.VUEAPPBASE_API, // 根据环境变量设置基础url
timeout: 5000 // 请求超时时间
});

// 请求
service.interceptors.request.use(
config => {
// 在发送请求之前做些什么
// 比如可以在请求头中加入token
const token = localStorage.getItem('token');
if (token) {
config.headers['Authorization'] = Bearer ${token};
}
return config;
},
error => {
// 对请求错误做些什么
console.log(error); // for debug
return Promise.reject(error);
}
);

// 响应
service.interceptors.response.use(
response => {
// 对响应数据做点什么
const res = response.data;
// 如果返回的状态码不是200,说明请求有误
if (res.code !== 200) {
Message({
message: res.message || 'Error',
type: 'error',
duration: 5 * 1000
});
return Promise.reject(new Error(res.message || 'Error'));
} else {
return res;
}
},
error => {
// 对响应错误做些什么
console.log('err' + error); // for debug
Message({
message: error.message,
type: 'error',
duration: 5 * 1000
});
return Promise.reject(error);
}
);

export default service;

在组件中使用:
javascript
import http from '@/utils/http'; // 假设将http.js放在src/utils目录下

methods: {
async fetchData() {
try {
const result = await http.get('/api/data');
console.log(result);
} catch (error) {
console.error(error);
}
}
}
```

三、思路二:基于Vuex管理请求状态

如果项目中使用了Vuex进行状态管理,可以将请求封装到Vuex的actions中。这样不仅能够集中管理请求逻辑,还可以更好地管理请求过程中的加载状态、错误信息等。

在Vuex store中创建action:
```javascript
import http from '../utils/http';

const actions = {
async fetchUserData({ commit }) {
commit('SETLOADING', true);
try {
const response = await http.get('/user');
commit('SET
USERDATA', response.data);
} catch (error) {
commit('SET
ERROR', error.message);
} finally {
commit('SET_LOADING', false);
}
}
};

export default actions;

对应的mutations:
javascript
const mutations = {
SETLOADING(state, loading) {
state.loading = loading;
},
SET
USERDATA(state, data) {
state.userData = data;
},
SET
ERROR(state, error) {
state.error = error;
}
};

在组件中触发action:
javascript
computed: {
...mapState(['loading', 'userData', 'error'])
},
methods: {
...mapActions(['fetchUserData']),
loadData() {
this.fetchUserData();
}
}
```

通过以上两种思路,我们可以根据项目的实际需求选择合适的方式来自定义Axios,从而更加高效地构建Vue项目。

1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!cheeksyu@vip.qq.com
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有积分奖励和额外收入!
5.严禁将资源用于任何违法犯罪行为,不得违反国家法律,否则责任自负,一切法律责任与本站无关

源码下载