CODEWITHSUNDEEP
angulartypescript
liumengyang
liumengyang

Reputation: 71

How to make data request complete and load animation disappear

enter code here`
     ngOnInit() {
        this.loading = true;
        this.jobExecution$ = this.route.params
          .pipe(mergeMap(
            val => this.jobsService.getJobExecution(val.id)
          ),
          catchError((error) => {
            console.log(error);
            if (HttpAppError.is404(error) || HttpAppError.is400(error)) {
              this.loading = false;
              this.cancel();
            }
            this.loggerService.log('error while loading Job Execution Details', error);
            this.loading = false;
            this.notificationService.error('错误', 'error');
            return EMPTY;
          }));
      }`

How to make data request complete and load animation disappear？ The code that cancels the animation and disappears doesn't know where to add it.

Upvotes: 2

Views: 72

Answers (3)

Johann-S
Johann-S

Reputation: 1301

Personaly I would prefer to use finalize because it runs when the observable complete (on success or on error) See: https://www.learnrxjs.io/operators/utility/finalize.html

ngOnInit() {
    this.loading = true;

    this.jobExecution$ = this.route.params
      .pipe(
        mergeMap(val => this.jobsService.getJobExecution(val.id)),
        catchError((error) => {
          if (HttpAppError.is404(error) || HttpAppError.is400(error)) {
            this.cancel();
          }

          this.loggerService.log('error while loading Job Execution Details', error);
          this.notificationService.error('错误', 'error');
          return EMPTY;
        }),
        finalize(() => this.loading = false)
      )
   );
}

Upvotes: 0

Florian
Florian

Reputation: 1481

You can use tap (https://www.learnrxjs.io/operators/utility/do.html)

ngOnInit() {
        this.loading = true;
        this.jobExecution$ = this.route.params
          .pipe(mergeMap(
            val => this.jobsService.getJobExecution(val.id)
          ),
          tap(
            (next) => (this.loading = false),
            (error) => {
              console.log(error);
            if (HttpAppError.is404(error) || HttpAppError.is400(error)) {
              this.cancel();
            }
            this.loggerService.log('error while loading Job Execution Details', error);
            this.loading = false;
            this.notificationService.error('错误', 'error');
            return EMPTY;
            },
          ));
}

Upvotes: 1

Tharindu Amarasingha
Tharindu Amarasingha

Reputation: 11

  ngOnInit() {
    this.loading = false;  //*always disable loader on ngOnInit
    this.getData();
  }

  getData(){
    this.loading = true;  //correct
    this.jobExecution$ = this.route.params
    .pipe(mergeMap(
      val => this.jobsService.getJobExecution(val.id)
    ).then( //on success
      this.loading = false; //***disable loader in here too
    ),
    catchError((error) => {
      console.log(error);
      if (HttpAppError.is404(error) || HttpAppError.is400(error)) {
        this.loading = false; //correct
        this.cancel();
      }
      this.loggerService.log('error while loading Job Execution Details', error);
      this.loading = false; //correct
      this.notificationService.error('错误', 'error');
      return EMPTY;
    }));
  }

Try this way. Follow best practices. Also disable loader on successfull response.

Upvotes: 1

Related Questions