封装Vue中的axios请求库

1. 安装axios：首先，在项目中安装axios库。可以使用npm或者yarn进行安装。

   npm install axios
   

2. 创建封装文件：在src目录下创建一个api文件夹，并在该文件夹下创建一个request.js文件。

3. 在request.js文件中，引入axios库和Vue：

   import axios from 'axios';
   import Vue from 'vue';
   

4. 创建一个axios实例，并设置一些默认配置：

   const instance = axios.create({
     baseURL: 'http://api.example.com', // 设置请求的基础URL
     timeout: 5000, // 设置请求超时时间
   });
   

5. 添加请求拦截器：我们可以在发送请求之前对请求进行拦截，添加一些通用的请求头信息等。

   instance.interceptors.request.use(
     (config) => {
       // 在发送请求之前做些什么
       config.headers.Authorization = 'Bearer ' + getToken(); // 示例：给请求头添加身份验证信息
       return config;
     },
     (error) => {
       // 对请求错误做些什么
       return Promise.reject(error);
     }
   );
   

6. 添加响应拦截器：我们可以在接收到响应之后对响应进行拦截，处理一些公共的错误信息等。

   instance.interceptors.response.use(
     (response) => {
       // 对响应数据做些什么
       return response.data;
     },
     (error) => {
       // 对响应错误做些什么
       return Promise.reject(error);
     }
   );
   

7. 封装具体的请求方法：根据项目需求，可以封装常用的GET、POST等请求方法。

   export const get = (url, params) => {
     return instance.get(url, { params });
   };
   
   export const post = (url, data) => {
     return instance.post(url, data);
   };
   

8. 在main.js文件中引入request.js，并将其挂载到Vue原型上：

   import request from './api/request';
   
   Vue.prototype.$http = request;
   

9. 在组件中使用封装后的请求方法：

   export default {
     methods: {
       fetchData() {
         this.$http.get('/api/data', { params: { id: 1 } }).then((response) => {
           // 处理返回的数据
         }).catch((error) => {
           // 处理请求错误
         });
       },
     },
   };
   

对axios进行封装有以下几个好处：

1. 代码复用性：封装axios可以将请求的逻辑和配置进行统一管理，提高代码的可复用性。在多个组件中使用相同的请求方法，避免了重复编写相似的请求代码。

2. 统一请求配置：通过封装，可以设置全局的请求配置，例如请求超时时间、请求头信息等。这样可以确保所有的请求都遵循相同的规则，并且方便集中管理和修改。

3. 错误处理和响应拦截：在封装过程中，可以添加请求拦截器和响应拦截器来统一处理错误和响应。例如，可以在请求拦截器中添加身份验证信息，或者在响应拦截器中处理常见的错误状态码。这样可以减少重复的错误处理逻辑。

4. 可定制性：封装axios可以根据项目需求进行定制。例如，可以根据特定情况对请求参数进行处理或筛选，或者添加自定义的请求头信息。这样可以更好地适应项目的具体要求。

5. 易于维护：通过封装，可以将网络请求相关的代码从业务逻辑中解耦，使代码结构更清晰易懂。当需要修改请求逻辑时，只需在封装的代码中进行修改，而不需要在多个地方进行修改，提高了代码的可维护性。