Vue3+Axios网络请求封装

Vue3是Vue.js框架的最新版本，它在语法、性能和开发体验等方面都进行了优化和改进。而AxIOS则是一个基于Promise的HTTP客户端，可以在浏览器和Node.js中使用。Axios可以帮助我们更方便地进行网络请求。

在Vue3中，我们可以通过创建一个自定义的插件来对Axios进行封装。下面是一个简单的Vue3+Axios网络请求封装的示例：

// src/plugins/axios.js

import axios from 'axios'

const axiosInstance = axios.create({
  baseURL: 'http://localhost:3000/api',
  timeout: 5000
})

export default {
  install: (App) => {
    app.config.globalProperties.$axios = axiosInstance
  }
}

通过上面的代码，我们创建了一个名为axiosInstance的Axios实例，并将其封装在Vue3插件中。我们在插件中将Axios实例添加到Vue3的全局属性axios中，这样在我们的axios组件中就可以直接使用axios中，这样在我们的Vue3组件中就可以直接使用axios进行网络请求。

接下来，我们可以在Vue3组件中使用$axios进行网络请求：

// src/views/Example.vue

<template>
  <div>
    <ul>
      <li v-for="user in users" :key="user.id">{{ user.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      users: []
    }
  },
  mounted() {
    this.$axios.get('/users')
      .then(response => {
        this.users = response.data
      })
      .catch(error => {
        console.log(error)
      })
  }
}
</script>

在上面的代码中，我们在mounted钩子函数中使用$axios发送了一个GET请求，获取了服务器端返回的用户信息列表，并将其赋值给组件的data属性users。