vue2封装axios api接口并设置ip+端口思路

在Vue2中封装axios API接口，并设置IP+端口，通常我们会创建一个自定义的axios实例，并将IP地址和端口号作为配置的一部分。以下是实现这个过程的一个基本步骤：

1. 引入axios库：首先，在项目入口文件或需要使用axios的地方导入axios库。

import axios from 'axios';

2. 创建axios实例：定义一个名为`axiosInstance`的变量，设置基础URL（包括IP和端口），可以使用环境变量来动态获取IP和端口，以适应不同的部署环境。

const axiosInstance = axios.create({
  baseURL: process.env.VUE_APP_API_URL || 'http://your-ip:your-port', // 使用环境变量或默认值
  timeout: 5000, // 设置超时时间
  headers: {
    'Content-Type': 'application/json',
  },
});

3. 公共方法：封装常用的方法，比如获取数据、发送POST请求等，将axiosInstance作为参数传递给这些方法。

export const get = (url, params) => axiosInstance.get(url, { params });
export const post = (url, data) => axiosInstance.post(url, data);
// 可以为其他HTTP方法（如put, delete）创建类似的方法

4. 在组件内部使用：当你需要使用API时，直接引入并调用上述导出的方法即可。

methods: {
  fetchData() {
    get('/users').then(response => {
      console.log(response.data);
    }).catch(error => {
      console.error('Error fetching data:', error);
    });
  }
}