Vue 3 如何处理异步操作（比如 API 请求）？

在现代 Web 应用开发中，异步操作已经成为不可或缺的一部分。尤其在需要与后端服务器进行通信、加载外部数据时，如何优雅、高效地处理这些异步操作成为前端开发者必须掌握的核心技能之一。在本文中，我们将聚焦于 Vue 3，并探讨它是如何处理异步操作的，特别是 API 请求。

Vue 3 中的异步操作简介

Vue.js 是一个渐进式 JavaScript 框架，用于构建用户界面。随着 Vue 3 的发布，很多新的特性和改进被引入，使得开发者更容易处理异步操作。Vue 3 利用了现代 JavaScript 中的一些特性，例如 Promise、async/await 等，使开发体验更为流畅和高效。

使用 async 和 await 处理异步 API 请求

async 和 await 是处理 JavaScript 异步操作的利器，这些关键字使得异步操作看起来更像是同步的代码，从而大大提高了代码的可读性和可维护性。

让我们通过一个具体的示例来了解如何在 Vue 3 组件中使用 async 和 await。

示例：

我们将构建一个简单的 Vue 3 应用，它从一个假设的 API 获取用户数据并展示这些数据。

首先，我们需要安装 Vue 3。使用以下命令初始化一个新的 Vue 项目：

npm init vue@latest

接下来，我们创建一个 Vue 组件，用于展示从 API 获取到的用户列表。假设我们的 API 端点是 https://jsonplaceholder.typicode.com/users。

<template>
  <div class="user-list">
    <h1>User List</h1>
    <ul>
      <li v-for="user in users" :key="user.id">{{ user.name }}</li>
    </ul>
    <p v-if="loading">Loading...</p>
    <p v-if="error">{{ error }}</p>
  </div>
</template>

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

export default {
  name: 'UserList',
  setup() {
    // 使用 ref 创建响应式 state
    const users = ref([]);
    const loading = ref(false);
    const error = ref(null);

    // 异步函数获取数据
    const fetchUsers = async () => {
      loading.value = true;
      try {
        const response = await fetch('https://jsonplaceholder.typicode.com/users');
        if (!response.ok) throw new Error('Network response was not ok');
        users.value = await response.json();
      } catch (err) {
        error.value = err.message || 'Failed to fetch users';
      } finally {
        loading.value = false;
      }
    };

    // 组件挂载时调用 fetchUsers
    onMounted(fetchUsers);

    return {
      users,
      loading,
      error
    };
  }
};
</script>

<style scoped>
.user-list {
  font-family: Arial, sans-serif;
}
</style>

在这个示例中，我们展示了 Vue 3 是如何通过 setup 函数和 Composition API 来处理异步操作的。

深入理解 ref 和 onMounted

在 Vue 3 中，我们使用 ref 来创建响应式状态，它允许我们在状态变化时自动更新界面。onMounted 是一个生命周期钩子，用于在组件挂载时执行某些操作。在上述示例中，我们在组件挂载时调用了 fetchUsers 来获取用户数据。

处理状态和错误

在进行 API 请求时，处理好加载状态和错误状态是至关重要的。通过 loading 和 error 状态，可以让用户在等待数据加载时看到合适的反馈，而不是面对一个空白页面或未处理的错误。

复用逻辑 - Composable Functions

在实际开发中，我们经常需要多次进行类似的 API 请求操作。为了代码的复用和简洁性，我们可以将这些逻辑抽取到独立的“可组合函数”中。

例如，我们可以创建一个名为 useFetch 的可组合函数来抽象我们的 API 请求逻辑：

// useFetch.js
import { ref } from 'vue';

export function useFetch(url) {
  const data = ref(null);
  const loading = ref(false);
  const error = ref(null);

  const fetchData = async () => {
    loading.value = true;
    try {
      const response = await fetch(url);
      if (!response.ok) throw new Error('Network response was not ok');
      data.value = await response.json();
    } catch (err) {
      error.value = err.message || 'Failed to fetch data';
    } finally {
      loading.value = false;
    }
  };

  fetchData();

  return {
    data,
    loading,
    error
  };
}

然后，我们可以在我们的组件中使用这个可组合函数，从而避免重复代码：

<template>
  <div class="user-list">
    <h1>User List</h1>
    <ul>
      <li v-for="user in data" :key="user.id">{{ user.name }}</li>
    </ul>
    <p v-if="loading">Loading...</p>
    <p v-if="error">{{ error }}</p>
  </div>
</template>

<script>
import { useFetch } from './useFetch';

export default {
  name: 'UserList',
  setup() {
    const { data, loading, error } = useFetch('https://jsonplaceholder.typicode.com/users');

    return {
      data,
      loading,
      error
    };
  }
};
</script>

<style scoped>
.user-list {
  font-family: Arial, sans-serif;
}
</style>

结论

通过本篇文章，我们深入探讨了 Vue 3 是如何处理异步操作的，特别是 API 请求。我们展示了如何使用 async 和 await 来编写更加简洁和高效的异步代码。此外，我们还介绍了 ref 和 onMounted 的基础用法，以及如何抽象和复用我们的异步处理逻辑。

不论是处理简单的异步请求，还是面对复杂的状态管理需求，Vue 3 提供了强大而灵活的 API，让开发者可以从容应对各种异步操作。在实际开发中，善用这些工具和技巧，可以极大地提升我们的开发效率和代码质量。