在 Vue 3 应用程序中预加载多个获取调用

Question

我有一个相对较小的应用程序，我想在应用程序最初加载时调用多个 api 并存储这些结果（没有 Vuex），以便可以通过 provide/inject 到子组件。

目前在我的 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: {},

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

之前没有完成

我的问题是

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

Answer 1

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

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

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

在 Vue 3 应用程序中预加载多个获取调用

Preload Multiple Fetch Calls in Vue 3 App

vue.js

fetch-api

vuejs3

vue-composition-api