RxJS 订阅并在其中执行代码

Question

在很多项目中，看到这样的订阅码：

isLoading: boolean; // the variable initializes, for instance, the display of the loader

下一步是加载页面内容：

this.loadSomething(): void {
  this.isLoading = true;
  this.someService.getMethod(data)
  .subscribe(response => {
      if (response) {
      ...do something
      }
    },
    (errors: HttpErrorResponse) => {
      ...do something
    },
    () => {
      this.isLoading = false;
    }
  );
};

据我所知，第三个.complete()订阅参数在出错的情况下不会被执行。因此，如果我们收到来自服务器的错误，this.isLoading = false; 将不会执行，我们也不会看到数据页，我们将看到一个无限加载程序。

在我的代码中，我总是这样写：

this.loadSomething(): void {
  this.isLoading = true;
  this.someService.getMethod(data)
  .subscribe(response => {
      this.isLoading = false;
      if (response) {
      ...do something
      }
    },
    (errors: HttpErrorResponse) => {
      this.isLoading = false;
      ...do something
    }
  );
};

..也就是说，不使用 .complete() 块

我不明白为什么要这样写，还是我遗漏了什么？您如何订阅以及如何正确订阅？

Answer 1

您可以使用 finalize 运算符来处理加载禁用，它将运行在 complete 或 error

之后

this.someService.getMethod(data).
pipe(finalize(()=>this.loading=false))
.subscribe()

Answer 2

this.someService.getMethod(data).subscribe(this.observer)


detectChanges() {
  this.loading = false;
  this.ref.detectChanges(); // if you are using OnPush strategy
}

 observer = {
  next: (data) => {
    // do stuff
    console.log(data);
    this.detectChanges()
  },
  error: (error) => {
     // do stuff
     // throw httpResponseError or treat error here
     console.log(error)
     this.detectChanges()
  },
  complete: () => {
     console.log("data has been loaded")
     this.detectChanges()
  }
}

RxJS 订阅并在其中执行代码

RxJS Subscription and code execution in it

subscribe

rxjs

angular