实现Vue3 Axios封装
一、整体流程
实现Vue3 Axios封装的步骤如下：
| 步骤 | 描述 |
|---|---|
| 1 | 安装Axios库 |
| 2 | 创建封装请求的模块 |
| 3 | 封装请求方法 |
| 4 | 创建全局Axios实例 |
| 5 | 封装全局请求拦截器 |
| 6 | 封装全局响应拦截器 |
| 7 | 在Vue中使用封装的Axios |
下面我们将逐步进行每个步骤的实现。
二、安装Axios库
首先，我们需要在Vue项目中安装Axios库。打开终端，切换到项目根目录，执行以下命令：
npm install axios
三、创建封装请求的模块
接下来，我们需要在项目中创建一个模块，用于封装请求方法。在src目录下创建一个名为api的文件夹，并在该文件夹下创建一个http.js文件。
四、封装请求方法
在http.js文件中，我们可以按照以下方式封装请求方法：
import axios from 'axios';
const http = axios.create({
baseURL: ' // 设置基础URL，根据实际情况进行修改
timeout: 5000 // 设置超时时间，单位为毫秒
});
// 封装get请求
export const get = (url, params) => {
return http.get(url, { params });
};
// 封装post请求
export const post = (url, data) => {
return http.post(url, data);
};
// 更多请求方法，如put、delete等，可以根据实际需求进行封装
五、创建全局Axios实例
在main.js中，我们需要创建一个全局的Axios实例。可以按照以下方式进行创建：
import { createApp } from 'vue';
import App from './App.vue';
import { createRouter, createWebHistory } from 'vue-router';
import { createAxios } from './api/http';
const app = createApp(App);
const router = createRouter({
history: createWebHistory(),
routes: []
});
const axiosInstance = createAxios(); // 创建全局Axios实例
app.config.globalProperties.$http = axiosInstance; // 将Axios实例挂载到全局
app.use(router);
app.mount('#app');
六、封装全局请求拦截器
在http.js文件中，我们可以继续封装全局的请求拦截器，用于在发送请求之前进行一些操作。例如，可以在请求头中添加认证信息。
import axios from 'axios';
const http = axios.create({
baseURL: '
timeout: 5000
});
// 请求拦截器
http.interceptors.request.use(
config => {
// 在发送请求之前做一些操作
config.headers.Authorization = 'Bearer token'; // 添加认证信息，根据实际情况进行修改
return config;
},
error => {
return Promise.reject(error);
}
);
// 封装get请求
export const get = (url, params) => {
return http.get(url, { params });
};
// 封装post请求
export const post = (url, data) => {
return http.post(url, data);
};
七、封装全局响应拦截器
在http.js文件中，我们可以继续封装全局的响应拦截器，用于对响应进行处理。例如，可以统一处理一些错误状态码。
import axios from 'axios';
const http = axios.create({
baseURL: '
timeout: 5000
});
// 请求拦截器
http.interceptors.request.use(
config => {
config.headers.Authorization = 'Bearer token';
return config;
},
error => {
return Promise.reject(error);
}
);
// 响应拦截器
http.interceptors.response.use(
response => {
// 对响应进行处理
return response.data;
},
error => {
// 对错误进行处理
return Promise.reject(error);
}
);
// 封装get请求
export const get = (url, params) => {
return http.get(url, { params });
};
// 封装post请求
export
