vue封装两中axios
时间: 2024-03-05 11:46:17 浏览: 20
在Vue中,可以使用axios库来进行网络请求。下面介绍两种常见的封装方式:
1. 第一种方式是通过创建一个axios实例,并在该实例上进行封装。这种方式可以在项目中创建一个单独的文件,例如`api.js`,然后在该文件中创建一个axios实例,并对其进行封装。具体步骤如下:
- 首先,安装axios库:`npm install axios`
- 在`api.js`文件中引入axios库和Vue:
```javascript
import axios from 'axios';
import Vue from 'vue';
```
- 创建一个axios实例,并进行封装:
```javascript
const instance = axios.create({
baseURL: 'http://api.example.com', // 设置请求的基础URL
timeout: 5000, // 设置请求超时时间
});
// 请求拦截器
instance.interceptors.request.use(
config => {
// 在发送请求之前做一些处理,例如添加token等
return config;
},
error => {
// 请求错误时做一些处理
return Promise.reject(error);
}
);
// 响应拦截器
instance.interceptors.response.use(
response => {
// 对响应数据进行处理,例如统一处理错误码等
return response.data;
},
error => {
// 响应错误时做一些处理
return Promise.reject(error);
}
);
// 将封装好的axios实例挂载到Vue原型上,方便在组件中使用
Vue.prototype.$http = instance;
```
- 在组件中使用封装好的axios实例:
```javascript
export default {
methods: {
fetchData() {
this.$http.get('/api/data')
.then(response => {
// 处理响应数据
})
.catch(error => {
// 处理错误
});
},
},
};
```
2. 第二种方式是通过创建一个插件来封装axios。这种方式可以在项目中创建一个单独的文件,例如`axios.js`,然后在该文件中创建一个Vue插件,并在插件中封装axios。具体步骤如下:
- 首先,安装axios库:`npm install axios`
- 在`axios.js`文件中引入axios库和Vue,并创建一个Vue插件:
```javascript
import axios from 'axios';
const AxiosPlugin = {
install(Vue) {
Vue.prototype.$http = axios.create({
baseURL: 'http://api.example.com', // 设置请求的基础URL
timeout: 5000, // 设置请求超时时间
});
// 请求拦截器
Vue.prototype.$http.interceptors.request.use(
config => {
// 在发送请求之前做一些处理,例如添加token等
return config;
},
error => {
// 请求错误时做一些处理
return Promise.reject(error);
}
);
// 响应拦截器
Vue.prototype.$http.interceptors.response.use(
response => {
// 对响应数据进行处理,例如统一处理错误码等
return response.data;
},
error => {
// 响应错误时做一些处理
return Promise.reject(error);
}
);
},
};
export default AxiosPlugin;
```
- 在`main.js`文件中使用该插件:
```javascript
import Vue from 'vue';
import AxiosPlugin from './axios';
Vue.use(AxiosPlugin);
```
- 在组件中使用封装好的axios实例:
```javascript
export default {
methods: {
fetchData() {
this.$http.get('/api/data')
.then(response => {
// 处理响应数据
})
.catch(error => {
// 处理错误
});
},
},
};
```