带有事件/可观察值的服务的成功/错误报告

Question

使用我在网上找到的一些文档，我编写了一个服务方法来保存一些数据，如下所示：

@Injectable
export class BrandService {

  brands$: Observable<Brand[]>;
  private _brandsObserver: Observer<Brand[]>;
  private _dataStore: {
      brands: Brand[]
  };

  constructor(private http: Http) {
    this.brands$ = new Observable(observer => this._brandsObserver = observer).share();
    this._dataStore = { brands: []};
  }

  saveBrand(brand: Brand) {
    var headers = new Headers();
    headers.append('Content-Type', 'application/json');
    return this.http.post("http://localhost:8080/api/brands", JSON.stringify(brand), { headers: headers })
       .map( (response: Response) => response.json()).subscribe(
           data => {
             this._dataStore.brands.push(data);
             this._brandsObserver.next(this._dataStore.brands);
           }, 
           error => console.log("Could not create Brand"));
  }
}

这允许我做的是将更新推送到我的品牌集合，我在视图上的 table 将观察这些更改并自动更新，因此我不必手动刷新它。世界上一切都很好。

我的问题是，由于我订阅了服务中的 http.post，我的组件现在无法知道此调用是否成功，这也意味着，因为我正在展示模式对话框中的表单，我不知道是否应该关闭对话框或显示错误。我的组件只是这样做...

this._brandService.saveBrand(this.brandForm.value);

所以，我在想我应该想出一种方法来 a) 在组件中监听的服务中触发一个事件，以便在好事/坏事发生时采取相应的行动，或者 b) 图以某种方式观察服务中的其他一些属性，当检测到这些更改时，我可以根据这些属性采取行动。但我对所有这些可观察的东西都很陌生，我什至不知道从哪里开始。

data => {
  this._dataStore.brands.push(data);
  this._brandsObserver.next(this._dataStore.brands);
  // fire some success event or
  // update some observed property
}, 
error => {
  // fire some failure event or
  // update some observed property
}

Answer 1

您可以在呼叫站点subscribe()

saveBrand(brand: Brand) {
    var headers = new Headers();
    headers.append('Content-Type', 'application/json');
    return this.http.post("http://localhost:8080/api/brands", JSON.stringify(brand), { headers: headers })
       .map( (response: Response) => response.json()).map(
           data => {
             this._dataStore.brands.push(data);
             this._brandsObserver.next(this._dataStore.brands);
           });
  }

this._brandService.saveBrand(this.brandForm.value)
.subscribe(
    value => onSuccess(),
    error => onError());

如果您仍想在 saveBrand 中进行一些一般性错误处理，您可以使用 catch 运算符（就像在中使用的那样）

带有事件/可观察值的服务的成功/错误报告

Success / Error Reporting from Service with Events / Observables

dom-events

observable

angularjs

angular