vue3 element 封装ajax

Vue3中可以借助Element库来封装Ajax请求。

首先，我们需要安装Element库，可以使用 npm 或 yarn 安装，例如：

npm install element-plus

然后，在Vue的入口文件中导入Element库的样式和组件，且注册相应的组件。示例如下：

import { createApp } from 'vue'
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

接下来，我们可以创建一个封装Ajax请求的工具类。例如，我们可以创建一个名为`ApiService.js`的文件，其中包含一个封装了Ajax请求的`request`方法，可以根据实际需求添加更多功能。示例如下：

import axios from 'axios'

const BASE_URL = 'https://api.example.com'

export default class ApiService {
  static request(url, method, params) {
    const requestOptions = {
      method: method,
      url: `${BASE_URL}/${url}`,
      params: params
    }

    return axios.request(requestOptions)
      .then(response => {
        return response.data
      })
      .catch(error => {
        // 错误处理
      })
  }
}

最后，在Vue组件中使用封装的Ajax请求。示例如下：

import ApiService from './ApiService'

export default {
  data() {
    return {
      userList: []
    }
  },
  mounted() {
    this.fetchUserList()
  },
  methods: {
    fetchUserList() {
      ApiService.request('users', 'GET', { page: 1 })
        .then(data => {
          this.userList = data
        })
    }
  }
}

通过以上步骤，我们就可以在Vue3中使用Element库来封装Ajax请求了。注意，具体的Ajax请求的URL、参数和处理方式需要根据实际情况进行调整。