Angular 2 当 Http 完成后发送到随后 运行 另一个函数

Angular 2 emit when Http has finished to subsequently run another function

我有一个通用功能,可以对我的 API 进行 DELETE 调用。函数是这样的:

deleteItem(url, item, action) {
    return this.http.delete(url)
        .subscribe(
            () => this.store.dispatch({ type: action, payload: item }),
            error => this.errorHandler(error),
            () => console.debug('Delete complete')
        )
    ;

我从几个地方调用这个函数,发送不同的 url、项目和操作。假设我有这样一个函数:

deleteBookcase(bookcase) {
    this.apiService.deleteItem(BOOKCASE_URL, bookcase, BOOKCASE_REMOVE);
}

有时,我想在从 API 中删除某个项目后触发另一个操作。例如,也许我想检查我的全局书库是否在我移除书柜后发生了变化。

有没有一种简单的方法可以让我的 deleteBookcase 函数知道 HTTP 调用和后续操作已经完成,然后再过早地触发额外的操作?

deleteItem()

中使用 map() 而不是 subscribe()
deleteItem(url, item, action) {
    return this.http.delete(url)
        .map(() => this.store.dispatch({ type: action, payload: item })
        .catch((error) => this.errorHandler(error))
        .do(() => console.debug('Delete complete'))
 });
}

并在你打电话的地方订阅 deleteItem()

deleteBookcase(bookcase) {
    this.apiService.deleteItem(BOOKCASE_URL, bookcase, BOOKCASE_REMOVE)
    .subscribe(data => doSomething());
}

不要忘记导入 domapcatch

为此,我将以这种方式重构您的方法:

deleteItem(url, item, action) {
  return this.http.delete(url)
      .catch((error) => {
        // handle error
      })
      .do(() => {
        this.store.dispatch({ type: action, payload: item });
      });
}

deleteBookcase(bookcase) {
    this.apiService.deleteItem(BOOKCASE_URL, bookcase, BOOKCASE_REMOVE).subscribe(() => {
      // do something
    });
}

如果操作在异步数据流之外执行,请使用 do 运算符。如果你想在调用 dispatch 结束后通知(并且 return 一个可观察的),你可以使用 flatMap 一个:

deleteItem(url, item, action) {
  return this.http.delete(url)
      .catch((error) => {
        // handle error
      })
      .flatMap(() => {
        return this.store.dispatch({ type: action, payload: item });
      });
}

通过这种方式重构你的方法,你需要小心,因为 observables 是惰性的,所以调用 deleteItem 而不订阅将不会执行请求:

// Request isn't executed
this.deleteItem();

// Request is executed
this.deleteItem().subscribe(() => {
});