- 安装axios：首先，在项目中安装axios库。可以使用npm或者yarn进行安装。
npm install axios -
创建封装文件：在src目录下创建一个api文件夹，并在该文件夹下创建一个request.js文件。
-
在request.js文件中，引入axios库和Vue：
import axios from 'axios'; import Vue from 'vue'; - 创建一个axios实例，并设置一些默认配置：
const instance = axios.create({baseURL: 'http://api.example.com', // 设置请求的基础URLtimeout: 5000, // 设置请求超时时间 }); - 添加请求拦截器：我们可以在发送请求之前对请求进行拦截，添加一些通用的请求头信息等。
instance.interceptors.request.use((config) => {// 在发送请求之前做些什么config.headers.Authorization = 'Bearer ' + getToken(); // 示例：给请求头添加身份验证信息return config;},(error) => {// 对请求错误做些什么return Promise.reject(error);} ); - 添加响应拦截器：我们可以在接收到响应之后对响应进行拦截，处理一些公共的错误信息等。
instance.interceptors.response.use((response) => {// 对响应数据做些什么return response.data;},(error) => {// 对响应错误做些什么return Promise.reject(error);} ); - 封装具体的请求方法：根据项目需求，可以封装常用的GET、POST等请求方法。
export const get = (url, params) => {return instance.get(url, { params }); };export const post = (url, data) => {return instance.post(url, data); }; - 在main.js文件中引入request.js，并将其挂载到Vue原型上：
import request from './api/request';Vue.prototype.$http = request; - 在组件中使用封装后的请求方法：
export default {methods: {fetchData() {this.$http.get('/api/data', { params: { id: 1 } }).then((response) => {// 处理返回的数据}).catch((error) => {// 处理请求错误});},}, };
对axios进行封装有以下几个好处：
代码复用性：封装axios可以将请求的逻辑和配置进行统一管理，提高代码的可复用性。在多个组件中使用相同的请求方法，避免了重复编写相似的请求代码。
统一请求配置：通过封装，可以设置全局的请求配置，例如请求超时时间、请求头信息等。这样可以确保所有的请求都遵循相同的规则，并且方便集中管理和修改。
错误处理和响应拦截：在封装过程中，可以添加请求拦截器和响应拦截器来统一处理错误和响应。例如，可以在请求拦截器中添加身份验证信息，或者在响应拦截器中处理常见的错误状态码。这样可以减少重复的错误处理逻辑。
可定制性：封装axios可以根据项目需求进行定制。例如，可以根据特定情况对请求参数进行处理或筛选，或者添加自定义的请求头信息。这样可以更好地适应项目的具体要求。
易于维护：通过封装，可以将网络请求相关的代码从业务逻辑中解耦，使代码结构更清晰易懂。当需要修改请求逻辑时，只需在封装的代码中进行修改，而不需要在多个地方进行修改，提高了代码的可维护性。
)
