Vue 3 中安装并使用 Axios 详细步骤+样例代码详解

# 安装axios
npm install axios

// 在Vue 3项目中的main.js文件中引入axios并配置到全局
import { createApp } from 'vue'
import App from './App.vue'
import axios from 'axios'

// 创建axios实例，可以添加配置，例如基础URL
const instance = axios.create({
  baseURL: 'http://api.example.com',
  timeout: 1000,
  // 可以添加更多配置
})

// 创建Vue应用
const app = createApp(App)

// 通过全局属性配置axios
app.config.globalProperties.$http = instance

// 挂载Vue应用
app.mount('#app')

// 在Vue组件中使用axios发送请求
<template>
  <div>
    <button @click="fetchData">Fetch Data</button>
  </div>
</template>

<script>
export default {
  methods: {
    async fetchData() {
      try {
        const response = await this.$http.get('/data')
        console.log(response.data)
      } catch (error) {
        console.error(error)
      }
    }
  }
}
</script>