Vue是一种流行的前端框架，能够帮助我们构建单页面应用程序。而Axios是一个基于Promise的HTTP库，用于发送异步HTTP请求。在Vue中使用Axios可以方便地与后端进行交互，获取数据并更新页面。
但直接在Vue组件中使用Axios可能会导致代码重复和混乱，因此我们可以将Axios进行封装，以便我们可以在整个应用程序中重复使用封装后的Axios实例，并且能够统一处理错误和添加请求拦截器等操作。
下面是我写的一个简单的Vue-Axios封装，以便方便地在项目中使用：
```javascript
// api.js
import axios from "axios";
// 创建一个新的Axios实例
const instance = axios.create({
baseURL: "https://api.example.com"
timeout: 10000
});
// 添加请求拦截器
instance.interceptors.request.use(
(config) => {
// 在请求发送之前做一些处理，比如添加请求头
config.headers["Authorization"] = "Bearer " + localStorage.getItem("token");
return config;
}
(error) => {
return Promise.reject(error);
}
);
// 添加响应拦截器
instance.interceptors.response.use(
(response) => {
// 在响应返回之后做一些处理
return response.data;
}
(error) => {
// 在请求出错时做一些处理
if (error.response) {
// 处理错误码，例如401 Unauthorized时跳转到登录页
if (error.response.status === 401) {
router.push("/login");
}
}
return Promise.reject(error);
}
);
export default instance;
```
上述代码是一个简单的Axios封装示例，其中我们创建了一个新的Axios实例，并添加了请求拦截器和响应拦截器。在请求拦截器中，我们可以在每个请求发送前做一些处理，比如添加请求头、设置token等。在响应拦截器中，我们可以在接收到响应后做一些处理，比如获取响应数据、处理错误等。
使用封装后的Axios实例非常简单，只需要在需要发送请求的地方导入`api.js`文件，然后使用`instance`进行请求即可：
```javascript
// 在Vue组件中发送请求
import api from "./api.js";
export default {
methods: {
fetchData() {
api.get("/data").then((response) => {
// 处理接收到的数据
console.log(response);
}).catch((error) => {
// 处理请求错误
console.error(error);
});
}
}
};
```
在上述代码中，我们导入了`api.js`文件并使用`api.get("/data")`发送了一个GET请求，然后使用`.then()`处理接收到的数据，`.catch()`处理请求错误。
通过封装Axios，我们可以方便地发送HTTP请求，并能够统一处理错误和添加请求拦截器等操作，从而提高代码的可维护性和可读性。
