Vue 封装 Axios
Axios 是一个基于 promise 的 HTTP 库，可以用于浏览器和 Node.js 环境。它可以用于发送异步的 HTTP 请求，支持拦截请求和响应，以及转换请求和响应数据。在 Vue 中使用 Axios 可以方便地进行数据请求和处理。
安装 Axios
使用 Axios 之前，我们需要先安装它。可以通过 npm 或者 yarn 进行安装。
npm install axios
或者
yarn add axios
安装完成后，我们就可以在项目中使用 Axios 了。
使用 Axios
在 Vue 中使用 Axios 需要先导入它，并创建一个 Axios 的实例。
import axios from 'axios';
const instance = axios.create({
baseURL: '
timeout: 5000,
});
上面的代码中，我们通过 axios.create 方法创建了一个 Axios 实例，并设置了基本的配置项，比如基础 URL 和超时时间。
接下来，我们可以使用实例的各种方法发送请求。
发送 GET 请求
发送 GET 请求最简单的方式是使用 instance.get 方法。
instance.get('/users')
.then(response => {
// 处理响应数据
console.log(response.data);
})
.catch(error => {
// 处理错误
console.log(error);
});
上面的代码中，我们发送了一个 GET 请求到 /users 接口，并通过 then 方法处理成功的响应数据，通过 catch 方法处理失败的响应数据。
发送 POST 请求
发送 POST 请求可以使用 instance.post 方法。
instance.post('/users', {
name: 'John Doe',
age: 30,
})
.then(response => {
// 处理响应数据
console.log(response.data);
})
.catch(error => {
// 处理错误
console.log(error);
});
上面的代码中，我们发送了一个 POST 请求到 /users 接口，并通过第二个参数传递了请求数据。
请求拦截器和响应拦截器
Axios 提供了请求拦截器和响应拦截器，可以在请求发送前和响应返回后对数据进行处理。
instance.interceptors.request.use(config => {
// 在发送请求之前做些什么
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 方法添加了一个响应拦截器。拦截器接收一个函数作为参数，函数中可以对请求和响应进行处理，并返回处理后的数据。
封装 Axios
为了更方便地在 Vue 项目中使用 Axios，我们可以对其进行封装，将一些公共配置和处理逻辑提取出来。
import axios from 'axios';
const instance = axios.create({
baseURL: '
timeout: 5000,
});
instance.interceptors.request.use(config => {
// 在发送请求之前做些什么
return config;
}, error => {
// 处理请求错误
return Promise.reject(error);
});
instance.interceptors.response.use(response => {
// 对响应数据做些什么
return response;
}, error => {
// 处理响应错误
return Promise.reject(error);
});
const request = (url, method, data) => {
return instance({
url,
method,
data,
});
};
export default request;
上面的代码中，我们将创建 Axios 实例的代码封装在一个函数中，并导出这个函数。这样，在其他地方使用 Axios 时，只需要导入这个函数即可。
import request from './request';
request('/users', 'get')
.then(response => {
// 处理响应数据
console.log(response.data);
})
.catch(error => {
// 处理错误
console.log(error);
});
上面的代码中，我们使用封装的 Axios 函数发送了一个 GET 请求到 /users 接口。
通过封装 Axios，我们可以将公共
