vuecli封装axios
时间: 2023-10-05 09:05:15 浏览: 168
vue+ts下对axios的封装实现
对于Vue CLI封装Axios,你可以在Vue项目中创建一个axios.js文件来封装Axios。下面是一个简单的示例代码:
在src目录下创建一个api文件夹,然后在api文件夹中创建一个axios.js文件。
```javascript
// api/axios.js
import axios from 'axios';
const instance = axios.create({
baseURL: 'https://api.example.com', // 设置接口的基础URL
timeout: 5000 // 设置请求超时时间
});
// 添加请求拦截器
instance.interceptors.request.use(
config => {
// 可以在发送请求之前做一些处理,比如添加token到请求头部
// config.headers['Authorization'] = getToken();
return config;
},
error => {
return Promise.reject(error);
}
);
// 添加响应拦截器
instance.interceptors.response.use(
response => {
// 对响应数据做一些处理
return response.data;
},
error => {
return Promise.reject(error);
}
);
export default instance;
```
然后,在需要使用Axios的地方,可以直接引入封装好的axios.js文件,如下所示:
```javascript
// main.js
import Vue from 'vue';
import axios from './api/axios';
Vue.prototype.$http = axios;
// 其他地方使用
this.$http.get('/api/users').then(response => {
console.log(response);
}).catch(error => {
console.log(error);
});
```
这样就完成了Vue CLI封装Axios的过程。
阅读全文