如何将 Axios 与 Vue 3 Composition API 一起使用

为什么使用Axios与Vue 3 Composition API结合

Axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 node.js，它可以用来发送异步 HTTP 请求到 REST endpoints。Vue 3 的 Composition API 提供了一种新的方式来组织和重用逻辑，特别是对于那些需要大量逻辑的组件，这使得代码更加清晰和易于维护。

如何结合使用

使用 Axios 与 Vue 3 的 Composition API 结合主要涉及到在 setup() 函数中创建和管理 API 请求。以下是一个基本的示例，演示如何在 Vue 3 组件中使用 Axios 发送请求并处理响应。

步骤1: 安装 Axios

首先，如果你的项目中还没有安装 Axios，你需要使用 npm 或 yarn 来安装它:

bash
npm install axios

或者

bash
yarn add axios

步骤2: 创建一个 Vue 3 组件

创建一个新的 Vue 3 组件，并在其中导入 Axios 和 reactive 或 ref 从 Vue 中用于状态管理。

vue
<template>
  <div>
    <h1>用户信息</h1>
    <div v-if="user">
      <p>姓名: {{ user.name }}</p>
      <p>邮箱: {{ user.email }}</p>
    </div>
    <div v-else>
      <p>加载中...</p>
    </div>
  </div>
</template>

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

export default {
  setup() {
    const user = ref(null);

    onMounted(async () => {
      try {
        const response = await axios.get('https://api.example.com/user/1');
        user.value = response.data;
      } catch (error) {
        console.error('请求用户数据失败:', error);
      }
    });

    return { user };
  }
};
</script>

说明

1. 我们使用 ref 来创建一个响应式的引用 user，初始值为 null。
2. 使用 onMounted 钩子来确保组件挂载后执行数据请求。这个钩子是 Composition API 提供的生命周期钩子之一，类似于 Vue 2 中的 mounted。
3. 在 onMounted 钩子函数中，我们使用 axios.get 发送一个 GET 请求到指定的 URL。
4. 请求成功后，我们将响应数据 (response.data) 赋值给 user，这将触发界面更新以显示新的用户信息。
5. 如果请求失败，我们在控制台中打印错误信息。

总结

将 Axios 与 Vue 3 的 Composition API 结合使用，可以有效地管理和使用异步 API 数据，同时保持组件的清晰和高效。通过这种方式，你可以轻松地在任何组件中重用和维护你的数据获取逻辑。