0Pricing
Vue Academy · 课时

useFetch：异步数据组合式函数

数据、加载状态和错误 ref，在挂载时获取数据，重新获取函数，以及 AbortController 清理

useFetch：异步数据组合式函数 是 CoddyKit 上的免费 Vue Academy 课时。 这是第 3 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Vue Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Vue Academy 课程共包含 4 节课。

useFetch 的目标

异步数据获取会在各处重复出现：加载标志、错误处理以及请求本身。useFetch 将这些内容整合到一个可复用的组合式函数中，并返回 data、loading 和 error。

三个响应式引用

先从描述任意异步请求状态的三个引用开始。

import { ref } from "vue";
function useFetch(url) {
  const data = ref(null);
  const loading = ref(false);
  const error = ref(null);
}

获取数据的例程

编写一个异步函数，切换 loading 的状态、执行请求并保存结果。接下来我们会完善错误处理。

async function execute() {
  loading.value = true;
  const res = await fetch(url);
  data.value = await res.json();
  loading.value = false;
}

try / catch / finally

对请求进行包装，让错误进入 error，并在 finally 中确保无论成功还是失败，loading 都会重置。

async function execute() {
  loading.value = true;
  error.value = null;
  try {
    const res = await fetch(url);
    if (!res.ok) throw new Error("HTTP " + res.status);
    data.value = await res.json();
  } catch (e) {
    error.value = e;
  } finally {
    loading.value = false;
  }
}

在 onMounted 中获取数据

在组件挂载时启动请求，让数据自动加载。

import { onMounted } from "vue";
onMounted(execute);

重新获取函数

将 execute 以 refetch 的名称公开，这样消费者就可以按需重新加载数据，例如在修改数据后或点击重试按钮时。

return { data, loading, error, refetch: execute };

使用 AbortController 进行清理

如果组件在请求进行期间卸载，请中止 fetch，以避免向已失效的组件设置状态。创建一个 AbortController，并传入它的信号。

const controller = new AbortController();
const res = await fetch(url, { signal: controller.signal });

卸载时中止请求

在 onUnmounted 中取消正在进行的请求。在 catch 中忽略由中止操作产生的错误。

import { onUnmounted } from "vue";
onUnmounted(() => controller.abort());

完整的 useFetch

组合完成后，这个组合式函数会在一个整洁的单元中处理加载、错误、重新获取和清理。

function useFetch(url) {
  const data = ref(null);
  const loading = ref(false);
  const error = ref(null);
  const controller = new AbortController();
  async function execute() {
    loading.value = true; error.value = null;
    try {
      const res = await fetch(url, { signal: controller.signal });
      data.value = await res.json();
    } catch (e) {
      if (e.name !== "AbortError") error.value = e;
    } finally {
      loading.value = false;
    }
  }
  onMounted(execute);
  onUnmounted(() => controller.abort());
  return { data, loading, error, refetch: execute };
}

在组件中使用

消费者根据三个引用进行渲染：加载时显示加载指示器，失败时显示错误消息，其他情况下显示数据。

const { data, loading, error } = useFetch("/api/posts");

模板模式

在模板中根据状态进行分支处理，从而实现完整的用户体验。

<p v-if="loading">Loading...</p>
<p v-else-if="error">{{ error.message }}</p>
<ul v-else>
  <li v-for="p in data" :key="p.id">{{ p.title }}</li>
</ul>

快速检查

AbortController 在 useFetch 中起什么作用？

回顾

您构建了 useFetch(url)，公开 data、loading 和 error 引用，在 onMounted 中使用 try/catch/finally 模式获取数据，提供 refetch 函数，并在 onUnmounted 中清理 AbortController。

常见问题解答

「useFetch：异步数据组合式函数」课时是免费的吗？

是的 — 「useFetch：异步数据组合式函数」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Vue Academy 课程的其余内容，请升级到 CoddyKit PRO。 Vue Academy 课程共包含 4 节课。

「useFetch：异步数据组合式函数」这节课中我会学到什么？

数据、加载状态和错误 ref，在挂载时获取数据，重新获取函数，以及 AbortController 清理 你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Vue Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Vue Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 3 节课，共 4 节。

「useFetch：异步数据组合式函数」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Vue Academy 课中编写并运行代码吗？

能。每节 Vue Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. 优秀组合式函数的特征
  2. useCounter：简单的组合式函数
  3. useFetch：异步数据组合式函数
  4. VueUse：组合式函数库
← 返回 Vue Academy