Vue Composition API 中如何使用 Axios 发起请求？

在 Vue Composition API 中使用 Axios 发起请求通常涉及到几个步骤：安装 Axios，设置响应式数据，创建一个请求函数，并在合适的生命周期钩子中调用这个函数。

下面是一个具体的例子，展示了如何在 Vue Composition API 中使用 Axios 发起一个 GET 请求：

首先，确保你已经安装了 Axios。如果还没有安装，可以使用 npm 或 yarn 来进行安装：

sh
npm install axios
# 或者
yarn add axios

然后，可以在 Vue 组件中使用 setup 函数来定义响应式数据和方法。这里是一个示例代码：

javascript
<template>
  <div>
    <div v-if="error">请求失败：{{ error }}</div>
    <div v-else-if="data">
      <!-- 这里展示你的数据 -->
      <div>{{ data.title }}</div>
    </div>
    <div v-else>加载中...</div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import axios from 'axios';

export default {
  setup() {
    const data = ref(null); // 用于存放请求结果的响应式数据
    const error = ref(null); // 用于存放可能出现的错误信息
    const loading = ref(false); // 用于表示请求是否正在进行中

    // 定义请求函数
    const fetchData = async () => {
      loading.value = true;
      error.value = null; // 每次请求前重置错误信息
      try {
        const response = await axios.get('https://jsonplaceholder.typicode.com/posts/1');
        data.value = response.data; // 如果请求成功，更新 data
      } catch (e) {
        error.value = e.message; // 如果请求失败，更新 error
      } finally {
        loading.value = false; // 无论成功还是失败，请求结束后更新 loading 状态
      }
    };

    // 在组件挂载后立即发起请求
    onMounted(() => {
      fetchData();
    });

    // 返回响应式数据，供模板访问
    return {
      data,
      error,
      loading
    };
  }
};
</script>

在上面的示例中，我们首先定义了三个响应式变量：data 用于存储请求到的数据，error 用于存储可能发生的错误信息，loading 用于表示请求是否正在进行。然后定义了一个名为 fetchData 的异步函数，负责使用 Axios 发起 GET 请求。在 onMounted 生命周期钩子中调用此函数以确保组件挂载后立即发起数据请求。最后，我们将响应式变量通过 setup 函数的返回值暴露给模板，以便在模板中进行数据绑定和显示状态信息。

以上就是在 Vue Composition API 中使用 Axios 发起请求的基本流程和示例。