}}</li> </ul> </template> </suspense> </template> ``` 结论在 Vue.js 3 中处理异步请求是一项轻松而有效的任务。通过封装请求、利用响应式数据、利用 Axios 拦截器、使用组合式 API 以及监控请求状态，我们可以创建可靠且高效的 SPA，为用户提供无缝且交互的体验。 Vue.js 3 中异步请求的最佳实践

2023-11-12 00:27:40

Vue.js 3 中异步请求的最佳实践

封装异步请求

想象一下你正在厨房里，准备一顿大餐。如果你把所有配料一股脑儿地倒进锅里，那只会是一团糟。为了获得一道美味的菜肴，你需要逐一准备每种配料，最后才能把它们组合起来。

在 Vue.js 3 中，异步请求也是如此。为了保持代码的井然有序和可维护性，我们将它们封装在可重用的函数中。使用 async/await 语法，我们可以轻松地把异步操作包装起来，就像把配料一一放进碗里一样。

const getPosts = async () => {
  const res = await fetch('https://my-api.com/posts');
  return res.json();
};

响应式数据

把配料准备好了，下一步就是把它们放到锅里。在 Vue.js 3 中，响应式数据就像我们的锅。它能自动更新，就像锅里咕嘟咕嘟冒泡的汤汁。

通过使用 ref 或 reactive，我们可以创建与 UI 绑定的响应式变量。当异步请求返回数据时，我们会把它放进这个变量中。这样一来，UI 就能够根据最新数据自动更新，就像汤汁沸腾时会冒泡一样。

const postsRef = ref(null);

const fetchPosts = async () => {
  postsRef.value = await getPosts();
};

Axios 拦截器

Axios 是一个备受推崇的 HTTP 请求库，与 Vue.js 3 配合得天衣无缝。它就像我们厨房里的助手，负责处理请求的各种细节。

Axios 拦截器就像我们厨房里的质量控制人员。它们允许我们在请求发送之前或之后执行额外的操作，比如检查授权头或在请求失败时显示错误消息。

axios.interceptors.request.use((config) => {
  config.headers.Authorization = `Bearer ${token}`;
  return config;
});

组合式 API

组合式 API 是 Vue.js 3 中的一项强大功能，可以帮助我们管理状态和异步请求。它们就像厨房里的多功能工具，可以用来处理各种任务。

useAsyncData 和 useMutation 是两个特别有用的组合式函数。我们可以用它们来创建可重用的数据请求和突变操作，就像用多功能工具打开罐头和切菜一样。

const usePosts = () => {
  const posts = useAsyncData('posts', getPosts);
  return posts;
};

监控请求状态

在烹饪时，我们会密切关注菜肴的进度。同样，在 Vue.js 3 中，我们需要监控异步请求的状态。Vue.js 3 的 suspense 功能就像厨房里的温度计，它允许我们在等待异步请求完成时渲染加载状态或错误消息。

<template>
  <suspense>
    <template v-if="posts.isLoading">Loading...</template>
    <template v-else-if="posts.error">Error...</template>
    <template v-else>
      <ul>
        <li v-for="post in posts.data">{{ post.title }}</li>
      </ul>
    </template>
  </suspense>
</template>