vue3 ts axios使用

Vue3是一个流行的JavaScript框架，它提供了一种使用户界面与数据模型分离的方式。Vue3的一个主要更新是使用了TypeScript，这使得Vue3更加强大和可维护。Axios是一个流行的基于Promise的HTTP客户端，它可以用于在浏览器和Node.js中发送异步请求。

在使用Vue3时，我们可以通过以下方式集成Axios：
1. 首先，我们需要在项目中安装axios和@vue/axios这两个包。可以使用以下命令进行安装：

npm install axios @vue/axios

2. 接下来，我们需要在main.js中添加以下代码：

import { createApp } from 'vue'
import App from './App.vue'
import { createPinia } from 'pinia'
import { createRouter, createWebHistory } from 'vue-router'
import { createI18n } from 'vue-i18n'
import axios from 'axios'
import VueAxios from '@vue/axios'

const app = createApp(App)
const router = createRouter({
  history: createWebHistory(),
  routes,
})
const i18n = createI18n({
  legacy: false,
  locale: 'en',
})

app.use(createPinia())
app.use(router)
app.use(i18n)
app.use(VueAxios, axios)

app.mount('#app')

这段代码会将Axios集成到Vue3中，并将其作为Vue插件使用。现在我们可以在Vue3组件中使用Axios了。

3. 在Vue3组件中使用Axios：

<template>
  <div>
    <button @click="getData">Get Data</button>
    <div v-if="loading">Loading...</div>
    <div v-if="error">{{ error }}</div>
    <div v-if="data">{{ data }}</div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import axios from 'axios'

export default defineComponent({
  setup() {
    const loading = ref(false)
    const data = ref(null)
    const error = ref(null)

    const getData = async () => {
      loading.value = true
      try {
        const response = await axios.get('https://jsonplaceholder.typicode.com/todos/1')
        data.value = response.data
      } catch (err) {
        error.value = err.message
      } finally {
        loading.value = false
      }
    }

    return {
      loading,
      data,
      error,
      getData,
    }
  },
})
</script>

在上面的示例中，我们首先导入axios并定义了三个响应式变量：loading、data和error。然后我们定义了一个名为getData的函数，它使用axios发送异步请求，并将响应数据存储在data变量中。如果请求出现错误，我们将错误信息存储在error变量中。最后，我们可以在模板中使用这些响应式变量来显示数据或错误消息。