vue3封装axios请求接口

你可以通过以下步骤封装 Axios 请求接口：

1. 首先，安装 Axios：

npm install axios

2. 创建一个名为 `api.js` 的文件，并在其中导入 Axios 和 Vue：

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

// 设置 Axios 的默认配置
axios.defaults.baseURL = 'https://api.example.com';  // 设置接口的基础URL

// 创建一个 Vue 实例，用于在组件中使用
const instance = new Vue();

// 封装一个统一的请求方法
const request = async (url, method, data) => {
  try {
    const response = await axios({
      url,
      method,
      data,
    });

    return response.data;
  } catch (error) {
    // 在这里处理错误信息
    instance.$message.error(error.message);
    throw error;
  }
};

export default request;

3. 在需要发送请求的组件中引入 `api.js` 文件，并使用封装的请求方法：

import request from './api.js';

export default {
  methods: {
    async fetchData() {
      try {
        const data = await request('/api/data', 'GET');
        // 处理返回的数据
      } catch (error) {
        // 处理错误
      }
    },
    async sendData() {
      try {
        const data = await request('/api/data', 'POST', { key: 'value' });
        // 处理返回的数据
      } catch (error) {
        // 处理错误
      }
    },
  },
};

通过这种方式，你可以在 Vue 组件中轻松封装和使用 Axios 请求接口。需要注意的是，这只是一个简单的示例，你可以根据实际需求进行进一步的封装和定制。