如何以角度处理顺序间隔请求？答案

【问题标题】：How to handle sequential interval requests in angular?如何以角度处理顺序间隔请求？
【发布时间】：2021-06-17 13:39:52
【问题描述】：

我正在尝试以角度发出 4 个连续请求，对于某些请求，我需要在 this.myService.startAudit() 中发出多个请求，直到计时器达到 30 秒或请求的值不会为空。我的代码的问题如下：间隔期间的先前请求将被取消，除了我认为由于switchMap() 导致的最后一个请求，第二个问题是我无法在间隔结束之前检查this.myService.startAudit() 的值。

 fetchData(data) {
    this.myService.createCase(data).pipe(
      finalize(() => this.loadingCreate = false),
      catchError(e => {
        this.loadingScan = false;
        this.loadingResult = false;
        return of(null)
      }),
      map(res => {
        if (res) {
          const caseId = res.caseSystemId;
          return caseId;
        }
      }),
      switchMap(id => this.myService.startScreen(id).pipe(
        catchError(() => {
          this.loadingScan = false;
          return of(null)
        }),
        finalize(() => this.loadingScan = false),
        switchMap((res) => interval(1000).pipe(
          takeWhile(val => val < 5),
          switchMap(() => this.myService.startAudit(id).pipe(
            // takeWhile(val => val.results.length > 0),
            catchError(e => of(null)),
            switchMap(() => this.myService.getResults(id).pipe(
              catchError(e => of(null)),
              finalize(() => this.loadingResult = false),
            ))
          ))
        ))
      ))
    ).subscribe(res => {
      if (res) {
        this.response = this.filterByPrior(res);
      }
    })
  }

【问题讨论】：

你不处理结果，因为所有的请求确实都被调用了。只需将 switchmap 更改为例如 mergeMap ，或者 concatMap 的行为可能会有所不同。为了更好地帮助您，请描述您希望实现的目标。目前还不清楚
我想发出顺序请求，1- createCase => 2 - startScreen => 3 - startAudit（发出此请求时 startAudit 有时会返回空值，我需要确保如果我收到了值在 30 秒内我停止请求），=> 4 - getResults

标签： angular rxjs

【解决方案1】：

对我来说，一些近似的解决方案是下面的代码。但是audit 和result 在间隔中一个接一个地重复。
audit, result , audit, result => 在间隔期间
我需要audit,audit,audit (once get data) => result

  fetchData(data) {
    let searchingId = '';
    this.myService.createCase(data).pipe(
      finalize(() => this.loadingCreate = false),
      catchError(e => {
        this.loadingScan = false;
        // this.loadingResult = false;
        return of(null)
      }),
      map(res => {
        if (res) {
          const caseId = res.caseSystemId;
          return caseId;
        }
      }),
      switchMap(id => {
        searchingId = id;
        return this.myService.startScreen(id).pipe(
          catchError(() => {
            this.loadingScan = false;
            return of(null)
          }),
          finalize(() => this.loadingScan = false),
          switchMap((res) => interval(1000).pipe(
            takeWhile(val => {
              return val < 30 && !this.stopinterfal
            }),
            concatMap(() => this.myService.startAudit(id).pipe(
              takeWhile(val => {
                const goNext = () => {
                  let result = false;
                  if (val && val.results && val.results.length) {
                    const searchAudObj = val.results.find(item => item.objectId === searchingId);
                    if (searchAudObj && searchAudObj.details && searchAudObj.details.statusCode === 'COMPLETED') {
                      this.stopinterfal = true;
                      result = true;
                    }
                  }
                  return result;
                }
                return goNext();
              }),
              catchError(e => of(null)),
              switchMap((res) => {
                return this.myService.getResults(searchingId).pipe(
                  catchError(e => of(null)),
                  finalize(() => {
                    console.log('finalize ')
                    this.loadingResult = false;
                  })
                )
              })
            ))
          ))
        )
      })
    ).subscribe(res => {
      if (res) {
        this.response = this.filterByPrior(res);
      }
    })
  }

【讨论】：