Vue项目中Axios接口调用封装技巧，告别重复代码！

在Vue项目中，Axios是一个常用的HTTP客户端，它可以帮助我们轻松发送各种HTTP请求。但是，随着项目的复杂度增加，直接在组件中编写重复的Axios代码会导致代码冗余和维护困难。因此，封装Axios接口调用是一个很好的实践。以下是一些封装技巧，帮助你告别重复代码。

1. 创建Axios实例

首先，我们需要创建一个Axios实例，并为其设置一些全局配置。这些配置可以包括基础URL、请求头、响应拦截器等。

import axios from 'axios';

// 创建Axios实例
const service = axios.create({
  baseURL: process.env.VUE_APP_API_BASE_URL, // 基础URL，根据项目配置
  timeout: 5000, // 请求超时时间
  headers: {
    'Content-Type': 'application/json'
  }
});

// 请求拦截器
service.interceptors.request.use(
  config => {
    // 在发送请求之前做些什么
    return config;
  },
  error => {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

// 响应拦截器
service.interceptors.response.use(
  response => {
    // 对响应数据做点什么
    return response;
  },
  error => {
    // 对响应错误做点什么
    return Promise.reject(error);
  }
);

export default service;

2. 封装请求方法

将常用的请求方法（如GET、POST、PUT、DELETE等）封装成单独的函数，这样可以避免在组件中重复编写相同的代码。

import request from './request'; // 引入上面创建的Axios实例

// 封装GET请求
function get(url, params) {
  return request({
    method: 'get',
    url,
    params
  });
}

// 封装POST请求
function post(url, data) {
  return request({
    method: 'post',
    url,
    data
  });
}

// ... 其他请求方法

export { get, post, /* ...其他方法 */ };

3. 使用封装的请求方法

在组件中使用封装的请求方法，可以减少代码冗余，并使代码更加简洁。

<template>
  <div>
    <button @click="fetchData">获取数据</button>
  </div>
</template>

<script>
import { get } from './request'; // 引入封装的请求方法

export default {
  methods: {
    fetchData() {
      get('/api/data')
        .then(response => {
          // 处理响应数据
        })
        .catch(error => {
          // 处理错误
        });
    }
  }
};
</script>

4. 封装API接口

将项目中所有需要调用的API接口封装成一个模块，方便管理和调用。

import request from './request';

// 封装API接口
const api = {
  getUserInfo(userId) {
    return request.get(`/api/users/${userId}`);
  },
  updateUserInfo(userId, data) {
    return request.post(`/api/users/${userId}`, data);
  },
  // ... 其他API接口
};

export default api;

5. 使用封装的API接口

在组件中使用封装的API接口，可以使代码更加清晰和易于维护。

<template>
  <div>
    <button @click="getUserInfo">获取用户信息</button>
  </div>
</template>

<script>
import { getUserInfo } from './api';

export default {
  methods: {
    getUserInfo() {
      getUserInfo(123)
        .then(response => {
          // 处理用户信息
        })
        .catch(error => {
          // 处理错误
        });
    }
  }
};
</script>

通过以上封装技巧，我们可以有效地减少Vue项目中Axios接口调用的重复代码，提高代码的可维护性和可读性。希望这些技巧能够帮助你更好地进行项目开发。