Angular 6 多次调用 Observable 的 subscribe()

Question

我有两个组件：NewItemComponent 和 ListComponent。当我在相应组件中创建新项目时，我通知 ListComponent 以便它可以刷新它的数据模型：

export class NewItemComponent implements OnInit {

  constructor(private itemService: ItemService, private notificationService: NotificationService) {
  }

  ngOnInit() {
  }

  createNewItem(item: Item) {
    this.itemService.persist(item).subscribe((response: Item) => {
      console.log(response);
      this.notificationService.notifyNewItemHasBeenCreated(response);
    });
  }
}


export class ListComponent implements OnInit {

  items: Item[];

  constructor(private listService: ListService, private notificationService: NotificationService) {
  }

  ngOnInit() {
    this.loadItems();

    this.notificationService.item$.subscribe((item) => {
      if (item != null) {
        this.loadItems();
      }
    })
  }

  loadItems(){
    this.istService.getItems().subscribe((data: Item[]) => {
      this.items= data;
      console.log(this.items);
    });
  }
}


@Injectable({
  providedIn: 'root'
})
export class NotificationService {

  private _item: BehaviorSubject<Item> = new BehaviorSubject<Item>(null);
  public  item$ = this._item.asObservable();

  constructor() {
  }

  notifyNewItemHasBeenCreated(item: Item) {
    this._item.next(item);
  }
}

让我担心的是 loadItems() 多次调用 subscribe()。这可以吗，还是有更好的方法根据通知重新获取项目？

  loadItems(){
    this.listService.getItems().subscribe((data: Item[]) => {
      this.items= data;
      console.log(this.items);
    });
  }

ListService 返回 Observable：

export class ListService {

  basePath = 'my-api.com';
  apiPath = "item";

  constructor(private httpClient: HttpClient) {
  }

  getItems(): Observable<Item[]> {
    return this.httpClient.get<Item[]>(this.basePath + '/' + this.apiPath);
  }
}

提前致谢，我们将不胜感激。

Answer 1

作为一个实验，如果您执行以下操作：

this.httpClient.get("<some url>")
  .subscribe({
    next: () => {
      console.log("received response")
    },
    error: err => {
      console.log("error occurred")
    },
    complete: () => {
      console.log("subscription completed")
    },
  })

你应该看到：

received response
subscription completed

这意味着每个 Web 请求的 observable 都在请求完成后完成，因此不取消订阅是安全的，因为这是在 observable 完成时自动完成的。

Answer 2

如果您多次订阅调用，则在组件销毁时取消订阅。

像这样改变你的组件：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs';

export class ListComponent implements OnInit, OnDestroy {

  items: Item[];

  constructor(private listService: ListService, private notificationService: NotificationService) {
  }

  subscriptions: Subscription[] = [];

  ngOnInit() {
     this.subscriptions.push(this.loadItems());

     this.subscriptions.push(this.notificationService.item$.subscribe((item) => {
       if (item) {
         this.loadItems();
       }
     }));
  }

  ngOnDestroy() {
    this.subscriptions.forEach(x => x.unsubscribe());
  }

  loadItems(){
    this.istService.getItems().subscribe((data: Item[]) => {
      this.items= data;
      console.log(this.items);
  });
 }
}

Answer 3

loadItems() 只调用一次subscribe。
实际发生的情况是，您在notificationService.item$ 的订阅中多次调用loadItems()。
如果您仅出于此目的需要NotificationService，我建议您进行少量重构。

new-item.component.ts

export class NewItemComponent {

  constructor(private itemService: ItemService, private listService: ListService) {
  }

  createNewItem(item: Item) {
    this.itemService.persist(item).subscribe((response: Item) => {
      this.listService.addItem(item);
    });
  }
}

list.service.ts

export class ListService {

  basePath = 'my-api.com';
  apiPath = 'item';

  private itemsSubject: BehaviorSubject<Item[]> = new BehaviorSubject<Item[]>([]);
  private items$: Observable<Item[]>;

  constructor(private httpClient: HttpClient) {
  }

  getItems(): Observable<Item[]> {
    const http$ = this.httpClient.get<Item[]>(this.basePath + '/' + this.apiPath);
    return combineLatest(http$, this.items$).pipe(
      map(([httpResponse: Item[], localItems: Item[]]) => httpResponse.concat(localItems)),
    );
  }

  addItem(item: Item) {
    this.itemsSubject.next([...this.itemsSubject.value, item]);
  }

}

Answer 4

编辑：

环顾四周后，我发现了这些帖子：
Is it necessary to unsubscribe from observables created by Http methods?
Prevent memory leaks in Angular 2?

cmets 和答案解释了HttpClient.get() 订阅会自行清理，因此您无需取消订阅。这意味着对它们多次调用.subscribe() 就可以了。

Answer 5

你现在正在做的是：

1. 制作新物品，发送到服务器
2. 服务器将成功响应与项目一起发送到项目服务。它通知通知服务。您实际上并没有对这个项目做任何事情，而是验证它。
3. 您的通知服务获取项目，通知您的列表组件。
4. 您的列表组件检查项目是否有效，然后向服务器发送另一个请求以获取更新的列表
5. List 组件订阅更新列表的列表服务。及时更新。

因此，简而言之，对于您创建的每个新项目，您都会向服务器发出 2 个请求并获得 2 个响应。

您可以看到这里有很多冗余。让我们试着简化一下：

1. 制作新物品，发送到服务器
2. 服务器发送带有更新的项目列表的成功响应。 只有在收到的商品有效时才会发送此商品列表，否则会发回错误响应。
3. 您的通知服务已订阅此内容并获取已由服务器验证的项目列表，然后将这个新项目列表发送给您的列表服务。
4. 列表组件使用新数据更新视图。

现在您每次只发出一个请求，而不是两个。而且您不必再处理这么多 Observables。