扩展 Angular2 HTTP 客户端时，如何在 rxjs Observable 之外运行方法？

Question

我正在为我的 Angular2 打字稿应用程序创建一个 HttpClient，但我被困在错误处理程序中。

我想在捕获 401 错误时发出事件，并且我能够捕获错误但不能触发我的事件，因为 .catch 需要附加到 Observable 类型的函数，所以我不可以访问我的 HttpClient 类 this 范围。

errorHandler (error:any) : Observable<any> {
  if(error.status == 401) {
    // I want to call this.myOtherMethod() here!
    this.events.publish('token_expired'); // Will throw this.events is undefined
    console.log(error);
  }

  return Observable.throw(error.json());
}

get(url) : Observable<any> {
  return this.http.get(url, {
    headers: this.customHeaders
  }).catch( this.errorHandler );
}

所以我知道我无法从这个函数内部访问我的 this.events，但是解决方法是什么？如何在那里注入事件？

Answer 1

问题是您引用了errorHandler 方法，因此您丢失了this 关键字的值。这就是 JavaScript 的工作方式。

您可以尝试以下方法来防止这种情况：

get(url) : Observable<any> {
  return this.http.get(url, {
    headers: this.customHeaders
  }).catch( (error:any) => {
    return this.errorHandler(error);
  });
}

或

get(url) : Observable<any> {
  return this.http.get(url, {
    headers: this.customHeaders
  }).catch( this.errorHandler.bind(this) );
}

在 TypeScript 中使用 bind 方法时需要注意缺点：

• https://basarat.gitbooks.io/typescript/content/docs/tips/bind.html