Зависимость между двумя асинхронными c действиями в Vue

Question

Мой дом. vue требуется два асинхронных c действия:

created() {
  this.$store.dispatch('GET_LATEST_POLL');
  this.$store.dispatch('INIT_STREAM');
},

Это их реализация Vuex:

GET_LATEST_POLL: async (context) => {
  const pollData = await axios.get(`${BFF_ENDPOINT}/polls/last`, getAuthHeader(context));
  const item = pollData.data.data;
  context.commit('SET_LATEST_POLL', item);
},

INIT_STREAM: async (context) => {
  const streamData = await axios.get(`${API_ENDPOINT}/polls/?obd=date`, getAuthHeader(context));
  const items = streamData.data.data;
  items.filter(item => item._id !== context.state.latestPoll._id);
  context.commit('SET_STREAM', items);
},

Я понял, что INIT_STREAM зависит от LATEST_POLL context.state.latestPoll. Я не хочу сериализовать оба действия, я хочу, чтобы они оба общались с бэкэндом паралельно. Но тогда мне нужно INIT_STREAM, чтобы дождаться результата LATEST_POLL.

Как мне его достичь? Должен ли я объединить логи c в одно действие, которое запускает два обещания, а затем await Promise.all([latestPoll, items])? Это правильный подход?

Answer 1

Когда я интерпретировал вопрос, вы предлагали создать третье действие, объединяющее два действия. Такой подход звучит хорошо, но я думаю, что вы также можете настроить INIT_STREAM для параллельных вызовов. Вам необходимо:

1. Убедитесь, что GET_LATEST_POLL возвращает свое обещание.
2. Отправьте действие в GET_LATEST_POLL из INIT_STREAM, но не await результат - просто сохраните возвращаемое значение как const getLatestPollPromise.
3. Заставить топор ios вызвать const streamData = await axios.get..., но снова изменить его с await на const streamDataPromise = axios.get...
4. Использовать await Promise.all([getLatestPollPromise, streamDataPromise]), как вы предложили в вопросе.

Если INIT_STREAM всегда нуждается в latestPoll, я не вижу необходимости в третьем действии, поскольку оно квалифицируется как утечка абстракции и, вероятно, приведет в замешательство других разработчиков.

Answer 2

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

LatestPollAndStreamAction: async (context) => {
    let pollDataRequest = axios.get(...);
    let streamDataRequest = axios.get(...);
    Promise.all(pollDataRequest , streamDataRequest).then(([latestPoll, items]) => {
        const pollItem = latestPoll.data.data;
        context.commit('SET_LATEST_POLL', pollItem);
        //logic for the other commit
        const streamItems = streamData.data.data;
        streamItems.filter(item => item._id !== context.state.latestPoll._id);
        context.commit('SET_STREAM', streamItems);
    })
}

Это обеспечит параллельное выполнение обоих ваших запросов, и как только вы получите результат от обоих, выполните коммиты в нужном порядке.

PS: код не проверен но только вы даете суть желаемого подхода