Использование Promise.all () с эпиками rxjs в React.js - PullRequest
Новая
       15

Использование Promise.all () с эпиками rxjs в React.js

0 голосов
/ 28 мая 2019

Мне нужно решение, чтобы вернуть одно обещание от 3-х различных вызовов API. В настоящее время выполняется 3 различных вызова API с помощью rxjs epics и ожидает возврата одного объекта обещания после завершения всех 3 вызовов. Возникают проблемы с пониманием того, как использовать Promise.all () и где его вызывать. Я думаю, что что-то похожее на Promise.all () является forkJoin (). У меня есть несколько фиктивных данных для примера моего эпоса, который я использую ниже. Это все происходит в React. Может ли кто-нибудь предоставить подробный пример того, как использовать Promise.all () или forkJoin с эпопеями в React, пожалуйста?

Спасибо 

  action$.ofType(GET_PROMISE).mergeMap(
    action =>
      action.payload.search_location === undefined ||
      action.payload.search_location.length === 0 ||
      action.payload.search_location === "" ||
      stateRegex.test(action.payload.search_location.toLowerCase()) === true
      ? api
         .fetchPromise(action.payload)
         .map(
           payload =>
           payload.value === undefined || payload.value.length === 0
                 ? getPromiseFail()
                 : getPromiseSuccess(payload)
           )

В тот момент, когда я возвращаю объект обещания, я обновляю состояние и объединяю эти данные с двумя другими обещаниями из двух разных вызовов API. Поскольку они асинхронны, они возвращаются в разное время. Поэтому я хотел бы объединить все 3 вызова перед отображением любых данных в веб-приложении.

1 Ответ

0 голосов
/ 29 мая 2019

Вы правы, заглянув в forkJoin .

Вот примерное переписывание вашего примера: 

action$.ofType(GET_PROMISE).mergeMap(
  action =>
    // wait for all three fetches to complete
    forkJoin(
      api.fetchOne(action.payload),
      api.fetchTwo(action.payload),
      api.fetchThree(action.payload)
    )
    // now we have all three results as an array here:
    .map(([one, two, three]) => {
      // turn those results into an action
      return getPromiseSuccess(one, two, three)
    })
)

Обратите внимание, что код, которым вы поделились, похоже, использует устаревшую версию RxJS, поэтому рекомендуется обновить или, по крайней мере, написать код в конвейерную форму .

Надеюсь, это поможет

...