Асинхронное извлечение данных VuexFire с Then / Catch - PullRequest
Новая
       104

Асинхронное извлечение данных VuexFire с Then / Catch

0 голосов
/ 06 ноября 2019

Учитывая следующее действующее действие vuex с именем init, которое извлекает коллекцию settings и accounts: 

actions: {
  init: firestoreAction(({ bindFirestoreRef, commit }, payload) => {
    bindFirestoreRef(
      'settings', fb.settings.doc(payload),
    )
      .then(() => commit('SETTINGS_READY', true))
      .catch((err) => {
        commit('SNACKBAR_TEXT', err.message);
        Sentry.captureException(err);
      });

    bindFirestoreRef(
      'accounts', fb.accounts.where('program', '==', payload),
    )
      .then(() => commit('ACCOUNTS_READY', true))
      .catch((err) => {
        commit('SNACKBAR_TEXT', err.message);
        Sentry.captureException(err);
      });
  }),
},

У меня есть два вопроса:

  1. Кажется, что код работает синхронно, но я хочу, чтобы две коллекции извлекались асинхронно, чтобы максимизировать производительность. Как этого достичь?
  2. Можно ли реорганизовать этот код, чтобы сделать его более лаконичным и в то же время обеспечить независимую (и синхронную) функциональность then/catch, представленную в примере?

1 Ответ

0 голосов
/ 06 ноября 2019

Вы можете использовать функцию async / await, а затем вызвать bindFirestoreRef внутри Promise конструктора. 

actions: {
init: firestoreAction(async ({ bindFirestoreRef, commit }, payload) => {
    await Promise((resolve, reject) => {
      bindFirestoreRef('settings', fb.settings.doc(payload))
        .then((res) => {
          commit('SETTINGS_READY', true);
          resolve(res);
        })
        .catch((err) => {
          commit('SNACKBAR_TEXT', err.message)
          Sentry.captureException(err)
          reject(err)
        })
    })

    await new Promise((resolve, reject) => {
      bindFirestoreRef('accounts', fb.accounts.where('program', '==', payload))
        .then((res) => {
          commit('ACCOUNTS_READY', true);
          resolve(res);
        })
        .catch((err) => {
          commit('SNACKBAR_TEXT', err.message)
          Sentry.captureException(err)
          reject(err)
        })
    })
  }) 
},
...