RXJS redux observable 执行多个 api 调用答案

【问题标题】：RXJS redux observable perform multiple api callsRXJS redux observable 执行多个 api 调用
【发布时间】：2019-02-09 15:51:31
【问题描述】：

我有一个联系人数组，并希望对联系人数组中的每个对象执行 API 调用。我尝试遍历每个项目并调用 fetchJson$，但是，我意识到这种方法是不正确的。

使用 RXJS Redux Observables 执行此操作的正确方法是什么？

另外，这是本问题的伪代码，因此请忽略任何语法错误。

export const createPost = (action$, store) => (
  action$.ofType(UPDATE_USER_CONTACTS)
    .switchMap(() => {
      const state = store.getState();
      const userToken = getUserToken(state);
       const userId = getuserId(state);
       const listOfContacts = getListUserContacts(state);

      return Observable.concat(
        // 1. show loading
        Observable.of(showSpinner()),
        // 2. set the timer
        Observable.defer(() => {

          const contacts = [
            {
              id: '123',
              name: 'Paul',
              phoneNumber: '000-000-00'
            },
            {
              id: '098',
              name: 'Sarah',
              phoneNumber: '111-111-11'
            },
          ]

          contacts.forEach((contact) => { 
            return fetchJson$('PUT', `${API_URL}/users/${userId}/user_contacts/${contact.id}`, userToken, {
              id: contact.id,
              name: contact.name,
              phoneNumber: contact.phoneNumber,
            })
          }, false)
            .flatMap(() => (
              Observable.of(
                reset(),
                notification({
                  icon: 'm-timers',
                  text: '<b>Good - worked</b>.',
                }),
              )
            ))
            .catch(({ response }) => {
              const responseArray = [];
              if (response) {
                console.log(response, 'there was a response')
              }
              return Observable.of(...responseArray);
            });
        }),
        Observable.defer(() => {
          // perform another action here
        },
        // 4. hide loading
        Observable.of(hideSpinner()),
      );
    })
);

【问题讨论】：

标签： javascript ecmascript-6 rxjs redux-observable

【解决方案1】：

我认为您正在寻找 forkJoin：

签名：forkJoin(...args, selector : function): Observable 。当所有 observables 完成后，发出每个 observables 最后发出的值。

const contacts = [
    {
        id: '123',
        name: 'Paul',
        phoneNumber: '000-000-00'
    },
    {
        id: '098',
        name: 'Sarah',
        phoneNumber: '111-111-11'
    },
];
Observable.forkJoin(
    contacts.map((contact) => {
            return fetchJson$('PUT', `${API_URL}/users/${userId}/user_contacts/${contact.id}`, userToken, {
                id: contact.id,
                name: contact.name,
                phoneNumber: contact.phoneNumber,
            })
        }
    )
);

【讨论】：