vue封装两中axios

在Vue中，可以使用axios库来进行网络请求。下面介绍两种常见的封装方式：

第一种方式是通过创建一个axios实例，并在该实例上进行封装。这种方式可以在项目中创建一个单独的文件，例如api.js，然后在该文件中创建一个axios实例，并对其进行封装。具体步骤如下：

首先，安装axios库：npm install axios

在api.js文件中引入axios库和Vue：
import axios from 'axios';
import Vue from 'vue';
登录后复制

创建一个axios实例，并进行封装：
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实例：
export default {
methods: {
fetchData() {
this.$http.get('/api/data')
.then(response => {
// 处理响应数据
})
.catch(error => {
// 处理错误
});
},
},
};
登录后复制

第二种方式是通过创建一个插件来封装axios。这种方式可以在项目中创建一个单独的文件，例如axios.js，然后在该文件中创建一个Vue插件，并在插件中封装axios。具体步骤如下：

首先，安装axios库：npm install axios

在axios.js文件中引入axios库和Vue，并创建一个Vue插件：
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文件中使用该插件：
import Vue from 'vue';
import AxiosPlugin from './axios';

Vue.use(AxiosPlugin);
登录后复制

在组件中使用封装好的axios实例：
export default {
methods: {
fetchData() {
this.$http.get('/api/data')
.then(response => {
// 处理响应数据
})
.catch(error => {
// 处理错误
});
},
},
};
登录后复制