Как заставить приложение выполнять 3 наблюдаемых последовательно в угловых, используя RxJS 6.4.0?

Question

Я видел несколько подобных вопросов, но не было верного решения моей проблемы.

У меня есть два запроса httpClient: один для редактирования, а другой для выбора.Сначала я хочу выполнить операцию редактирования, а затем выбрать операцию.

Я обнаружил, что существует оператор RxJS, названный так, как concat может это сделать.

Я попытался реализовать его, и теперь мой код выглядит следующим образом: (Я знаю, вероятно, это не настоящий код, но это то, что я понимаю)

метод отправки:

public subMit() {
  const streamOne = of(this.edit());
  const streamTwo = of(this.clear());
  const streamThree = of(this.fetch());
  const sourcefour = streamOne.pipe(delay(5000));
  const result = sourcefour.pipe(concat(streamTwo.pipe(concat(streamThree))));
  result.subscribe();
}

Редактирование, очистка и выборка метода:

public edit() {
  this.measServ.editbyid(this.meas._id, this.meas).subscribe(
    x => console.log(x),
    err => console.log(err),
    () => console.log('edited')
  );
}


public fetch() {
  this.measServ.getonebyid(this.myControl.value).subscribe(
    x => {
      this.meas._id = x._id;
      this.meas.measureTitle = x.measureTitle;
      this.meas.measureDescription = x.measureDescription;
      this.meas.measureSymbol = x.measureSymbol;
    }
  );
  console.log('fetch');
}


public clear() {
  this.meas._id = '';
  this.meas.measureTitle = '';
  this.meas.measureDescription = '';
  this.meas.measureSymbol = '';
  console.log('clear');
}

Это практический проект, моя главная цель - увидеть его производительность.Поэтому я хочу установить задержку в 5 секунд после ответа на операцию редактирования, а затем выбрать данные.но приведенный выше код не работал должным образом.просто выполнено без задержки.Может быть, я не использовал истинный синтаксис или устаревшие элементы.

Ваш истинный ответ делает меня счастливым.

Answer 1

импорт конкат ?

import { of, concat } from 'rxjs';

concat требует наблюдаемого, поэтому я должен отредактировать все методы, чтобы вернуть наблюдаемое

public subMit() {
  const streamOne = this.edit();
  const streamTwo = this.clear();
  const streamThree = this.fetch();
  const sourcefour = streamOne.pipe(delay(1500));
  const result = sourcefour.pipe(concat(streamTwo.pipe(concat(streamThree))));
  result.subscribe();
}

порядок передачи наблюдаемого параметра в concat: порядок выполнения sourcefour будет сначала перезапущен при компиляции streamTwo после этого streamThree

public edit() {
  return this.measServ.editbyid(this.meas._id, this.meas)
    .pipe( finalize(() => console.log('1-edited')));
}

public fetch() {
  return this.measServ.getonebyid(this.myControl.value)
    .pipe(
      finalize(() => console.log('3-fetched')),
      tap(
        x => {
          this.meas._id = x._id;
          this.meas.measureTitle = x.measureTitle;
          this.meas.measureDescription = x.measureDescription;
          this.meas.measureSymbol = x.measureSymbol;
          console.log('3-data moved to variable');
        }
      )
    );
}

public clear() {
  return of(1).pipe(
    tap(() => {
      this.meas._id = '';
      this.meas.measureTitle = '';
      this.meas.measureDescription = '';
      this.meas.measureSymbol = '';
      console.log('2-cleared');
    })
  );
}

Подробнее о concat

Answer 2

Да, это возможно при использовании цепочки mergeMap

mergeMap принимает функцию, которая возвращает наблюдаемую информацию, на которую мы можем либо подписаться, либо связать больше mergeMap s в rxjs pipe function

Рабочий пример на

https://stackblitz.com/edit/angular-multi-mergemap