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

Question

我正在为我的 Angular2 typescript 应用程序创建一个 HttpClient，但我卡在了错误处理程序中。

我想在捕捉到 401 错误时发出一个事件，我能够捕捉到错误但不会触发我的事件，因为 .catch 需要附加到 Observable 类型的函数，所以我无法访问我的 HttpClient Class this scope.

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

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

How can I run a method outside rxjs Observable when extending Angular2 HTTP Client?

rxjs

typescript

ionic2

angular2-http

angular

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

How can I run a method outside rxjs Observable when extending Angular2 HTTP Client?

rxjs

typescript

ionic2

angular2-http

angular

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