vue自定义axios

《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';

export default actions;
对应的mutations：javascript
const mutations = {
SETLOADING(state, loading) {
state.loading = loading;
},
SETUSERDATA(state, data) {
state.userData = data;
},
SETERROR(state, error) {
state.error = error;
}
};
在组件中触发action：javascript
computed: {
...mapState(['loading', 'userData', 'error'])
},
methods: {
...mapActions(['fetchUserData']),
loadData() {
this.fetchUserData();
}
}
```