vue3使用axios

在Vue 3中，我们可以使用axios来处理HTTP请求。下面是一个使用axios的简单示例：

首先，需要安装axios:

npm install axios --save

然后，在main.js文件中引入并配置axios：

import { createApp } from 'vue'
import App from './App.vue'
import axios from 'axios'

const app = createApp(App)

// 配置axios
axios.defaults.baseURL = 'https://api.example.com'
axios.defaults.headers.common['Authorization'] = 'Bearer ' + localStorage.getItem('token')

app.config.globalProperties.$http = axios

app.mount('#app')

在上面的代码中，我们首先使用`createApp`函数创建了一个Vue 3应用程序。然后，我们通过`axios.defaults`来配置了axios的一些默认值，比如请求的基础URL和请求头中的Authorization字段。最后，我们通过`app.config.globalProperties.$http = axios`将axios绑定到Vue的全局属性中，从而在整个应用程序中都可以使用`this.$http`来调用axios。

接下来，在Vue组件中就可以使用axios来发送HTTP请求了，比如：

<template>
  <div>
    <ul>
      <li v-for="post in posts" :key="post.id">
        {{ post.title }}
      </li>
    </ul>
  </div>
</template>

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

在上面的代码中，我们通过`this.$http.get('/posts')`来发送一个GET请求，获取/posts路径下的数据。当请求成功时，我们将响应数据保存到组件的`posts`属性中，从而渲染到页面上。当请求失败时，我们打印出错误信息到控制台。

总之，Vue 3可以很方便地使用axios来处理HTTP请求，让开发者可以更快捷地开发应用程序。