与状态相关的每 5 秒运行一次方法

Question

我在组件中有从后端获取数据并检查状态的方法

这里是

 getRecognitionById() {
    this.loaderService.show(null, true);

    this.vendorWebApiService
      .createRecognition(this.executiveChangeId)
      .pipe(take(1))
      .subscribe((res) => {
        this.vendorWebApiService
          .getRecognition(res.taskRequestId, this.executiveChangeId)
          .pipe(take(1))
          .subscribe((recognitionResponse) => {
            if (recognitionResponse.jobStatus === "completed") {
              this.recognitionData = recognitionResponse;
              this.getLatesFeedback();
            }
            if (recognitionResponse.jobStatus === "failed") {
              alert();
            } else {
              
            }
          });
      });
  }

在这部分我检查状态

 this.vendorWebApiService
      .getRecognition(res.taskRequestId, this.executiveChangeId)
      .pipe(take(1))
      .subscribe((recognitionResponse) => {
        if (recognitionResponse.jobStatus === "completed") {
          this.recognitionData = recognitionResponse;
          this.getLatesFeedback();
        }
        if (recognitionResponse.jobStatus === "failed") {
          alert();
        } else {

        }
      });

但是如果状态是另一个然后完成或失败的问题，我需要每 5 秒重新运行一次这个逻辑，所以每 5 秒我需要检查一次状态，并且在 10 次尝试后，我需要显示警报。

我需要如何重写我的代码来实现这个逻辑？

Answer 1

你可以用 rxjs 做到这一点

    import { interval, Subject, Subscription } from 'rxjs';
    refresher$: Observable<number>;
    refreshSub: Subscription;
    jobStatus: string = "init"
    checkCount = 0

    checkStatus() {
      this.checkCount++
      this.vendorWebApiService
        .getRecognition(res.taskRequestId, this.executiveChangeId)
        .pipe(take(1))
        .subscribe((recognitionResponse) => {
          jobStatus = recognitionResponse.jobStatus
          this.recognitionData = recognitionResponse
          
        });
    }

    getRecognitionById() {
      this.loaderService.show(null, true);

      this.checkStatus()
   }

    this.refresher$ = interval(5000); // every5 sec
    this.refreshSub = this.refresher$.subscribe(() => {
      this.checkStatus()
      if (this.jobStatus === 'completed') {
        this.getLatesFeedback();
      }
      if (this.jobStatus === 'failed') {
        alert()
      } else {
         if (this.checkCount == 10) {
            alert()
         }
      }

    });

Answer 2

您可以通过这种方式实现：

1. 定义一个计数器变量。

2. 使用 5000 毫秒计时器定义一个间隔并将其引用到一个变量。

3. 清除成功间隔。

4. 失败时的重新运行间隔和counter < 10 的计数器。

let counter = 0;
let interval = setInterval(() => {
  // ajax().next(() => {
  //   clearInterval(interval);
  // }).catch(() => {
  //   if (counter >= 10) {
  //     clearInterval(interval);
  //   } else {
  //     counter++;
  //   }
  // })
}, 5000);

• 不要忘记在ngOnDestroy 中清除您的时间间隔，以防止您的应用在某些情况下崩溃。

Answer 3

使用 observables 你可以尝试这样的事情

  getRecognitionById() {
    //   this.loaderService.show(null, true);
    const ATTEMPT_COUNT = 10;
    const DELAY = 5000;
    this.vendorWebApiService
      .createRecognition(this.executiveChangeId)
      .pipe(take(1),
        mergeMap((res) => (
          this.vendorWebApiService
            .getRecognition(res.taskRequestId, this.executiveChangeId)
            .pipe(take(1),
          ))), map((recognitionResponse: any) => {
            if (recognitionResponse.jobStatus === "completed") {
              this.recognitionData = recognitionResponse;
              this.getLatesFeedback();
            }
            if (recognitionResponse.jobStatus === "failed") {
              alert();
            } else {
              throw { error: 'failed' };
            }
          }), retryWhen(errors => errors.pipe(
            scan((errorCount, err: any) => {
              if (err.error === 'failed' || errorCount >= ATTEMPT_COUNT) {
                // add code for alert after 10 retries
              }
              return errorCount + 1;
            }, 0),
            delay(DELAY),
          )));
  }