Как я могу выполнить несколько запросов http в Angular 2+, но ждать завершения каждого из них, прежде чем делать следующее?

Question

У меня есть что-то похожее на это:

// Build requests array
const requests = [];
contacts.forEach(contact => {                     
  requests.push(
    this.httpService.post('/users', { name: contact.name })
  );
});

// Run them all at once and do stuff when they all complete
return Observable.forkJoin(requests).pipe(
  map(() => console.log('All requests are done!')),
  catchError(() => console.log('Something went wrong'))
);

При использовании forkJoin вот так все http-запросы выполняются одновременно.Как я могу вместо этого делать запросы один за другим?То есть я хочу, чтобы запрос 1 был завершен, ЗАТЕМ запустить запрос 2 и т. Д. Я не смог найти ни одного оператора rxjs, который бы это делал.

Answer 1

Просто используйте concat.Он будет подписываться на каждый источник Observable один за другим, когда завершится предыдущий Observable.

import { concat } from 'rxjs';

...

concat(...requests).pipe(
  toArray(), // Collect all responses to a single array
).subscribe((results) => ...);

Возможно, вы даже не используете toArray, это зависит от того, что вы хотите сделать с ответами.

Answer 2

Вы можете использовать flatMap для этого типа запросов http.Вот фрагмент моего кода, который может работать на вас.

public sendMailForExit(email) {
    email.employee.token = Common.newGuid();
    return this.http.postRequest(StaticKeywords.url_email + 'InitialSaveEmployeeExitDetails', email).map((response: Response) => {
      return response;
    })
      .flatMap((token: any) => {
        if (token.json().success === true) {
          email.employee.url = StaticKeywords.baseUrlApp + '#/' + StaticKeywords.url_employee + StaticKeywords.url_exitDetail +
            email.employee.ID + '/' + email.employee.token;
          return this.http.postRequest(StaticKeywords.url_email + 'sendEmail', email).map((innerResponse: Response) => {
            return this.CheckResponse(innerResponse);
          });
        } else {
          return [{ token: token }];
        }
      });
  }