vue2封装axios请求接口

在Vue 2中，我们可以使用axios库来处理HTTP请求，将其封装成自定义的API组件可以使代码更简洁、易管理。以下是创建一个基本的axios封装示例：

首先，需要安装axios库：

npm install axios

然后，在`src/api.js` 或 `src/utils` 等文件中创建一个axios实例并暴露一些基础的接口方法：

import axios from 'axios';

// 创建axios实例并配置默认选项
const service = axios.create({
  baseURL: process.env.VUE_APP_API_URL || 'http://your-api-url.com', // API地址
  timeout: 5000, // 请求超时时间（单位：ms）
  headers: { 'Content-Type': 'application/json' } // 默认请求头
});

// 定义公共响应拦截器
service.interceptors.request.use(
  config => {
    // 在发送请求之前做些什么
    return config;
  },
  error => {
    // 对请求错误做些什么
    console.error('Request failed with error', error);
    Promise.reject(error);
  }
);

// 定义公共响应拦截器
service.interceptors.response.use(
  response => {
    // 如果请求成功，处理响应数据
    return response.data;
  },
  error => {
    // 处理网络错误和状态码不是2xx的情况
    if (error.response.status) {
      console.error(`Error ${error.response.status}: ${error.response.statusText}`);
    } else {
      console.error('Something went wrong in Axios request.');
    }
    Promise.reject(error);
  }
);

// 封装常用的方法，如获取数据、添加数据等
export const get = (url, params) =>
  service.get(url, { params });

export const post = (url, data) =>
  service.post(url, data);

export default service;

现在你可以通过导入这个服务，在Vue组件中像这样使用封装后的API：

import { get, post } from '@/api';

export default {
  data() {
    return {
      users: []
    };
  },
  async created() {
    try {
      this.users = await get('/users');
    } catch (error) {
      console.error(error);
    }
  },
  methods: {
    addUser(user) {
      try {
        const response = await post('/users', user);
        // 更新状态或其他操作...
      } catch (error) {
        console.error(error);
      }
    }
  }
};