vue3.0 elementplus axios封装

以下是Vue3.0中使用Element Plus和Axios的封装示例：

1. 首先，安装Element Plus和Axios：

npm install element-plus axios

2. 在main.js中引入：

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

const app = createApp(App)
app.use(ElementPlus)
app.config.globalProperties.$axios = axios
app.mount('#app')

3. 封装Axios请求：

import axios from 'axios'

// 创建axios实例
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // api的base_url
  timeout: 5000, // 请求超时时间
  headers: {
    'Content-Type': 'application/json;charset=UTF-8',
  },
})

// request拦截器
service.interceptors.request.use(
  (config) => {
    // 在发送请求之前做些什么
    return config
  },
  (error) => {
    // 对请求错误做些什么
    console.log(error) // for debug
    Promise.reject(error)
  }
)

// response拦截器
service.interceptors.response.use(
  (response) => {
    // 对响应数据做点什么
    const res = response.data
    if (res.code !== 0) {
      // 根据后端返回的错误码，做相应的处理
      // ...
      return Promise.reject('error')
    } else {
      return res
    }
  },
  (error) => {
    // 对响应错误做点什么
    console.log('err' + error) // for debug
    // 根据后端返回的错误码，做相应的处理
    // ...
    return Promise.reject(error)
  }
)

export default service

4. 在组件中使用：

import { reactive } from 'vue'
import axios from '@/utils/request'

export default {
  setup() {
    const state = reactive({
      data: [],
    })

    const fetchData = () => {
      axios.get('/api/data').then((res) => {
        state.data = res.data
      })
    }

    return {
      state,
      fetchData,
    }
  }
}

以上是Vue3.0中使用Element Plus和Axios的封装示例。需要注意的是，Axios请求拦截器和响应拦截器中的错误处理部分需要根据实际情况进行修改。