Question

我看到了这样的几个问题，但没有真正解决问题的方法。

我有两个httpClient请求，一个用于编辑，另一个用于选择。我希望先执行编辑操作，然后选择操作。

我发现有一个名为concat的RxJS运算符可以做到。

我试图实现它，我的代码现在是这样的：（我知道这可能不是真正的代码，但这是我的理解）

提交方法：

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');
}

这是一个实际的项目，我的主要目标是查看concat的性能。所以我想在编辑操作响应后设置5秒的延迟，然后选择数据。但以上代码无法正常工作。只是立即执行而已。可能是我没有使用真正的语法或未使用折旧的元素。

您的真实回答使我开心。

Answer 1

导入concat?

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时首先重新组合，在该stream之后将重新组合

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接受一个函数，该函数返回一个可观察的对象，我们可以在rxjs mergeMap函数中订阅或链接更多pipe

工作示例

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

如何使用RxJS 6.4.0强制应用程序依次按角度执行3个可观察到的操作？

2 个答案: