在 Vue 3 应用程序中预加载多个 Fe​​tch 调用

Question

我有一个相对较小的应用程序，我想在该应用程序最初加载时调用多个 api 并存储这些结果（不带 Vuex），以便可以通过提供/注入子组件使其可用。

目前在我的 App.vue 中，我有这个：

export default {
  setup() {
    const data = ref([]);
    const issues = ref([]);

    (async () => {
      const res = await fetch("/api/lists").then({ data });
      data.value = await res.json();
      data.value =
        data.value &&
        data.value.data.map((c) => {
          return { ...c.attributes, id: c.id };
        });
    })();
    (async () => {
      const res = await fetch("/api/issues").then({ issues });
      issues.value = await res.json();
      issues.value =
        issues.value &&
        issues.value.data.map((c) => {
          return [{ ...c.attributes, id: c.id }];
        });
    })();
    provide("items", data);
    provide("issues", issues);

    return {};
  },
  components: {},

item 数据在子组件中 100% 的时间呈现。问题数据的呈现可能有 10% 的时间，我假设这是因为异步函数在提供语句运行之前没有完成。

我的问题是

1. 有没有更好的方法来一次调用多个 fetch 语句并将这些结果分配给我可以“提供”的变量？
2. 当用户第一次访问该站点并提供结果而无需每次用户在视图之间切换时重新获取时，预加载这些 api 调用的最佳方法是什么（我还需要实现大约 3 或 4 个）并且不使用 Vuex。

Answer 1

你可以这样做：https://stackblitz.com/edit/vue-y5hetf

Promise.all 用于并行运行 fetch 调用，而不是串行执行，这有助于提高性能。

只要您在 App.vue 文件中执行这些请求，这些调用应该只在重新加载时发生，而不是在路由更改时发生。