Question

我有一个通用函数来对我的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')
        )
    ;

我从几个地方调用此函数发送不同的网址，项目和操作。假设我有这样的函数：

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

有时，我想在从API中删除项目后触发另一个操作。例如，也许我想检查我的全球书籍库是否已更改，现在我删除了书架。

是否有一种简单的方法让我的deleteBookcase函数知道HTTP调用和后续操作已经完成，然后再过早触发一个额外的操作？

Answer 1

在map()

中使用subscribe()代替deleteItem()

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());
}

不要忘记导入do，map，catch

Answer 2

要做到这一点，我会以这种方式重构你的方法：

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后结束通知（并返回一个可观察的），您可以使用flatMap一个：

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

通过这种方式重构你的方法，你需要小心，因为observable是懒惰的，所以调用deleteItem而不订阅不会执行请求：

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

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

当Http完成随后运行另一个函数时，Angular 2会发出

2 个答案: