Блог

Я создаю сайт в nuxt и получаю данные из api worpdress. У меня есть несколько магазинов: 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 }
}

 

Но проблема в том, что страница загружается очень долго. Потому что я вызываю диспетчерские службы, которые ждут, и я думаю, что в этом проблема.

Как я могу вызывать все отправки в fethc без асинхронности, но параллельно?

Я вижу преимущество работы с выборкой над asyncData в том, что только в первый раз, когда я загружаю страницу, мне нужно немного подождать, массивы заполнятся, и когда я попаду на текущую страницу с другой страницы, не будет запросов через api, и данные будут выводиться из хранилища.

Просто в 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));

 

Предполагая, что:

• store.dispatch() возвращает Обещание,
• первая попытка в вопросе в целом верна,
• цель состоит в том, чтобы параллельно выполнять соответствующие отправки,

затем:

• исключить await из store.dispatch() последовательности,
• накапливайте обещания, возвращаемые store.dispatch() в массиве,
• не используйте new Promise() обертку,
• await обещание вернулось Promise.all(promises) .

   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 })
 

Если это все еще не работает, значит, есть что-то, о чем вы нам не говорите.

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

Затем это вопрос отображения чего-либо, пока ваша страница выполняет выборку. Вы можете использовать a v-if="$fetchState.pending" на верхнем уровне вашей страницы, чтобы отобразить загрузчик, пока все это загружается.

Здесь нет ничего, связанного с идеологией, есть 2 крючка, которые выполняют извлечение данных, либо блокируя визуализацию страницы ( asyncData() ), либо позволяя вам визуализировать ее во время извлечения данных ( fetch() ).

Ничего не связано с фреймворком само по себе, вы вольны поступать так, как вам заблагорассудится.