vue3组合式api使用axios

可以使用 Vue 3 的组合式 API 结合 Axios 库来发送 HTTP 请求。以下是一个简单的示例：

1. 安装 Axios 库

npm install axios

2. 在组合式 API 中引入 Axios 库

import { ref } from 'vue'
import axios from 'axios'

export default function useAxios() {
  const data = ref(null)
  const error = ref(null)

  const fetchData = async (url) => {
    try {
      const response = await axios.get(url)
      data.value = response.data
    } catch (err) {
      error.value = err.message
    }
  }

  return { data, error, fetchData }
}

3. 在 Vue 组件中使用组合式 API

<template>
  <div>
    <button @click="fetchData">Fetch Data</button>
    <div v-if="data">{{ data }}</div>
    <div v-if="error">{{ error }}</div>
  </div>
</template>

<script>
import useAxios from './useAxios'

export default {
  setup() {
    const { data, error, fetchData } = useAxios()

    return { data, error, fetchData }
  }
}
</script>

在上述示例中，我们首先在组合式 API 中引入了 Axios 库，并定义了一个 fetchData 方法，该方法接收一个 URL 参数，使用 Axios 库发送 GET 请求，并将响应数据保存在 data 引用变量中，如果出现错误，将错误消息保存在 error 引用变量中。

然后，在 Vue 组件中引入 useAxios 组合式 API，并使用 fetchData 方法来触发 HTTP 请求，并使用 data 和 error 引用变量来显示响应数据和错误消息。

请注意，此示例仅用于演示如何使用 Vue 3 的组合式 API 结合 Axios 库发送 HTTP 请求。实际应用程序可能需要更复杂的逻辑和错误处理。