如何在 nuxt fetch 中使用一些调度？

Question

我在 nuxt 中创建了一个站点并从 worpdress api 获取数据。 我有几个商店：home.js、solutions.js、tipo.js、portfolio.js 和 options.js。

在 fetch 中，我检查存储数组是否为空，然后调用调度和填充数组。

export default {
  async fetch({ store }) {
    try {
      if (store.getters['home/home'].length === 0) {
        await store.dispatch('home/fetchHome');
      }
      if (store.getters["solutions/getSolutions"].length === 0) {
        await store.dispatch('solutions/fetchSolutions');
      }
      if (store.getters["tipo/getTipo"].length === 0) {
        await store.dispatch('tipo/fetchTipo');
      }
      if (store.getters["portfolio/getPortfolio"].length === 0) {
        await store.dispatch('portfolio/fetchPortfolio');
      }
      if(store.getters["options/getOptions"].length === 0){
        await store.dispatch('options/fetchOptions');
      }
    } catch (e) {
      console.log(e, 'e no data')
    }
  },
  components: { HomeContacts, PortofolioSlider, Clients, ChiSiamo, Solutions, HomeIntro }
}

但问题是，页面加载时间过长。因为我将调度称为 throw await，我认为这就是问题所在。

如何在 fethc 中调用所有调度，而不是异步但并行？

我看到使用 fetch 优于 asyncData 的优势在于，仅当我第一次加载页面时，我需要稍等片刻，数组将填满，当我从另一个页面到达当前页面时，不会通过api请求，数据会从store中输出。

只是关于 nuxt 在意识形态、如何工作以及什么时候更好用的信息很少。接下来，这会更好。

这个方法不行。

fetch({ store }) {
  const promise1 = new Promise((resolve, reject) => {
    if (store.getters['home/home'].length === 0) {
      resolve(store.dispatch('home/fetchHome'));
    }
  });
  const promise2 = new Promise((resolve, reject) => {
    if (store.getters["solutions/getSolutions"].length === 0) {
      resolve(store.dispatch('solutions/fetchSolutions'));
    }
  });
  const promise3 = new Promise((resolve, reject) => {
    if (store.getters["tipo/getTipo"].length === 0) {
      resolve(store.dispatch('tipo/fetchTipo'));
    }
  });
  const promise4 = new Promise((resolve, reject) => {
    if (store.getters["portfolio/getPortfolio"].length === 0) {
      resolve(store.dispatch('portfolio/fetchPortfolio'));
    }
  });
  const promise5 = new Promise((resolve, reject) => {
    if (store.getters["options/getOptions"].length === 0) {
      resolve(store.dispatch('options/fetchOptions'));
    }
  });
  Promise.all([promise1, promise2, promise3, promise4, promise5])
    .then((data) => console.log(data))
    .catch((error) => console.log(error));

Answer 1

假设：

• store.dispatch() 返回 Promise，
• 问题的第一次尝试通常是正确的，
• 目标是并行执行相关调度，

然后：

• 从store.dispatch() 序列中排除await，

• 将store.dispatch()返回的promise累积到一个数组中，

• 不要使用 new Promise() 包装器，

• awaitPromise.all(promises) 返回的 Promise。

  export default {
      async fetch({ store }) {
          try {
              let promises = [];
              if (store.getters['home/home'].length === 0) {
                  promises.push(store.dispatch('home/fetchHome'));
              }
              if (store.getters['solutions/getSolutions'].length === 0) {
                  promises.push(store.dispatch('solutions/fetchSolutions'));
              }
              if (store.getters['tipo/getTipo'].length === 0) {
                  promises.push(store.dispatch('tipo/fetchTipo'));
              }
              if (store.getters['portfolio/getPortfolio'].length === 0) {
                  promises.push(store.dispatch('portfolio/fetchPortfolio'));
              }
              if(store.getters['options/getOptions'].length === 0) {
                  promises.push(store.dispatch('options/fetchOptions'));
              }
              let data = await Promise.all(promises);
              console.log(data);
          } catch (e) {
              console.log(e);
          }
      },
      components: { HomeContacts, PortofolioSlider, Clients, ChiSiamo, Solutions, HomeIntro }
  }
  

为方便起见，可以按如下方式进行处理：

export default {
    async fetch({ store }) {
        try {
            let paths = [
                { get: 'home/home',              fetch: 'home/fetchHome' },
                { get: 'solutions/getSolutions', fetch: 'solutions/fetchSolutions' },
                { get: 'tipo/getTipo',           fetch: 'tipo/fetchTipo' },
                { get: 'portfolio/getPortfolio', fetch: 'portfolio/fetchPortfolio' },
                { get: 'options/getOptions',     fetch: 'options/fetchOptions' }
            ];
            let promises = paths.filter(p => store.getters[p.get].length === 0).map(p => store.dispatch(p.fetch));
            let data = await Promise.all(promises);
            console.log(data);
        } catch (e) {
            console.log(e);
        }
    },
    components: { HomeContacts, PortofolioSlider, Clients, ChiSiamo, Solutions, HomeIntro }
}

在代码的其他位置定义paths 数组并将其传递给简化的fetch() 并为其提供配置文件可能更有意义：

    fetch({ store, paths })

如果它仍然不起作用，那么你没有告诉我们一些事情。

Answer 2

Promise.all 在这里很有用：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all
甚至Promise.allSettled()，这取决于你想要做什么：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/allSettled

然后，这是在您的页面进行抓取时显示某些内容的问题。您可以在页面顶部使用v-if="$fetchState.pending" 来显示加载程序，同时获取整个内容。

这里与意识形态无关，有 2 个钩子通过阻止页面的呈现 (asyncData()) 或允许您在获取数据时呈现它来进行数据获取 (fetch())。

与框架本身无关，您可以随意做。