Angular + Rxjs 运算符 - 如果 api 未在 5 秒内完成则显示加载器显示 toastr 并隐藏加载器

Question

实际上，我们正在尝试避免在文件上传过程中阻止用户进行其他操作。

如果在 5 秒内使用 rxjs 在 angular 中未完成 api，我如何显示 toastr 并隐藏加载器。

uploadFile() {
  this.service.uploadFile(data)
    .pipe(
      //i am looking for operator which will wait 5 sec if and then hide the loader and show the toastr
    )
    .subscribe(() => {
      this.toastr.success('file uploaded successfully');
      this.loader.hide();
    })
}

提前致谢

Answer 1

您可以像这样创建加载服务：

import { Injectable } from '@angular/core';
import { Observable, Subject } from 'rxjs';

@Injectable({
  providedIn: 'root',
})
export class LoadingService {
  private isLoading = new Subject<boolean>();
  constructor() {}

  public start(isHideImmediately: boolean = false) {
    this.isLoading.next(true);
    if (isHideImmediately) {
      setTimeout(() => {
        this.complete()
      }, 5000);
    }
  }
  public complete() {
    this.isLoading.next(false);
  }

  getLoadingStatus(): Observable<boolean> {
    return this.isLoading.asObservable();
  }
}

并且每次调用api都可以在5s加载关闭后默认以start loading方式开始加载

你的代码：

uploadFile() {
  this.loadingService.start();
  this.service.uploadFile(data).subscribe(() => {
    this.toastr.success('file uploaded successfully');
    this.loadingService.complete();
  })
}

Answer 2

你可以在一段时间后使用普通的 JS setTimeout() 做某事。为了不影响正在进行的 API 请求，您可以将其包含在 RxJS tap 运算符中。此外，您可以使用finalize 运算符，而不是在订阅中隐藏加载程序。这样，如果请求抛出错误，加载程序也将被关闭。

uploadFile() {
  this.service.uploadFile(data).pipe(
    tap(_ => {
      setTimeout(() => {
        this.loader.hide();
        this.toastr.info('Uploading file');
      }, 5000);
    }),
    finalize(() => this.loader.hide())
  )
  .subscribe(() => {
    this.toastr.success('file uploaded successfully');
  })
}

但 IMO 对加载程序的硬编码时间限制无助于令人满意的接口。

Answer 3

你可以使用 rxjs 的操作符延迟：

import { delay } from "rxjs/operators";
    
uploadFile() {
  this.service.uploadFile(data)
    .pipe(delay(50000))
    .subscribe(() => {
      this.toastr.success('file uploaded successfully');
      this.loader.hide();
     })
}