vue3中写入axios

在 Vue 3 中，使用 Axios 进行 HTTP 请求通常会结合 Composition API 和 setup 钩子函数来实现。以下是一个基础的例子：

import { ref, onMounted } from 'vue';
import axios from 'axios';

const apiUrl = ref('https://api.example.com'); // 你的 API 地址

// 定义一个用于发送请求的方法
async function fetchData() {
  try {
    const response = await axios.get(`${apiUrl.value}/data`);
    // 处理返回的数据
    console.log(response.data);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}

// 当组件挂载后开始请求数据
onMounted(fetchData);

export default {
  setup() {
    return {
      apiUrl,
    };
  },
};

在这个例子中，`ref` 是用来创建响应式变量，`onMounted` 是在组件挂载后执行的钩子，确保在页面加载完成后发起请求。

如果你想让这个请求成为组件的一部分，并提供给模板使用，可以将 `fetchData` 方法添加到 `setup` 返回的对象中：

<template>
  <button @click="fetchData">获取数据</button>
  <div v-if="response">{{ response }}</div> <!-- 根据需要显示数据 -->
</template>

<script>
//...
export default {
  setup() {
    //...
    const fetchData = () => {
      //...
    };

    return {
      apiUrl,
      fetchData,
      response: ref(null), // 初始化 response 变量为空
    };
  },
};
</script>

现在点击按钮时就会触发请求。记得在实际项目中处理错误、状态管理以及适当的错误提示。