vue3封装axios请求传参post

在Vue 3中，使用axios作为HTTP客户端进行API请求是很常见的做法。封装axios可以帮助我们将请求的配置和处理逻辑抽象出来，使代码更加模块化和可复用。以下是一个简单的Vue 3中封装axios POST请求的例子：

// 引入axios库和Vue
import axios from 'axios';
import { createApp } from 'vue';

// 创建axios实例并配置默认参数
const service = axios.create({
  baseURL: process.env.VUE_APP_API_BASE_URL, // API基础URL
  timeout: 5000, // 请求超时时间
  headers: {
    'Content-Type': 'application/json', // 默认请求头
  },
});

// 封装axios方法
export function post(url, data) {
  return service.post(url, data)
    .then(response => {
      // 处理响应数据
      return response.data;
    })
    .catch(error => {
      // 处理错误
      console.error('Error posting request:', error);
    });
}

// 在Vue组件中使用封装的post方法
export default {
  data() {
    return {
      formData: {}, // 填充表单数据
    };
  },
  methods: {
    submitForm() {
      const postData = this.formData; // 获取需要POST的数据
      this.post('/api/submit', postData).then(response => {
        // 成功后处理回调
        console.log('Form submitted successfully:', response);
      });
    },
  },
};