实现“vue + vant 封装 axios”
1. 简介
在使用Vue和Vant进行开发时，经常需要与后端进行数据交互。而Axios是一种非常流行的HTTP库，用于在前端发送异步请求。在本文中，我们将学习如何封装Axios，以便在Vue项目中更方便地使用。
2. 整体流程
下面是整个封装Axios的流程，我们可以通过一个表格来展示每个步骤：
| 步骤 | 描述 |
|---|---|
| 安装Axios | 使用npm或yarn安装Axios依赖 |
| 创建封装文件 | 创建一个新的文件用于封装Axios |
| 导入Axios | 在封装文件中导入Axios |
| 创建实例 | 创建一个Axios实例 |
| 设置拦截器 | 添加请求和响应拦截器 |
| 封装请求方法 | 封装常用的请求方法 |
| 导出实例 | 导出封装好的Axios实例 |
| 在Vue项目中使用 | 在Vue项目中引入并使用封装好的Axios实例 |
3. 步骤详解
3.1 安装Axios
首先，我们需要安装Axios依赖。打开终端，进入Vue项目的根目录，并执行以下命令：
npm install axios
或
yarn add axios
3.2 创建封装文件
在Vue项目的src目录下，创建一个新的文件，命名为http.js（也可以根据个人喜好命名）。这个文件将用于封装Axios。
3.3 导入Axios
在http.js文件中，导入Axios库：
import axios from 'axios';
3.4 创建实例
接下来，我们需要创建一个Axios实例。在http.js文件中，添加以下代码：
const instance = axios.create({
baseURL: ' // 设置请求的基本URL
timeout: 5000 // 设置请求超时时间
});
在上述代码中，我们创建了一个名为instance的Axios实例，并通过baseURL和timeout设置了请求的基本URL和超时时间。你可以根据实际情况进行修改。
3.5 设置拦截器
Axios提供了请求和响应拦截器，我们可以使用它们来处理请求和响应的统一逻辑。在http.js文件中，添加以下代码：
// 请求拦截器
instance.interceptors.request.use(
config => {
// 在请求发送之前做一些处理，比如添加token
return config;
},
error => {
// 处理请求错误
return Promise.reject(error);
}
);
// 响应拦截器
instance.interceptors.response.use(
response => {
// 对响应数据做一些处理
return response;
},
error => {
// 处理响应错误
return Promise.reject(error);
}
);
上述代码中，我们使用instance.interceptors.request.use方法添加了请求拦截器，使用instance.interceptors.response.use方法添加了响应拦截器。你可以根据实际需求对这两个拦截器进行自定义处理。
3.6 封装请求方法
在http.js文件中，我们可以封装一些常用的请求方法，方便在Vue项目中调用。以下是一个简单的封装示例：
export default {
get(url, params) {
return instance.get(url, { params });
},
post(url, data) {
return instance.post(url, data);
},
// 其他请求方法...
}
在上述代码中，我们导出了一个对象，其中包含了get和post两个方法。可以根据实际需求添加其他请求方法，比如put、delete等。
3.7 导出实例
在http.js文件的末尾，导出封装好的Axios实例：
export default instance;
3.8 在Vue项目中使用
现在，我们已经完成了Axios的封
