为什么我不能在rxjs .let（）操作中使用“this”关键字？

-1

我正在学习Typescript中的抽象类。 this关键字在本课程的每个方法中都能很好地工作，除了handleRetry。即使我试图在该方法的顶部尝试console.log(this.amiUrl)，它也会爆炸并告诉我它找不到它。为什么我不能在rxjs .let（）操作中使用“this”关键字？

我已经尝试删除受保护的关键字，相信我误解了它的使用。不用找了。

角4.3

打字稿2.4.1

import { HttpHeaders, HttpClient, HttpErrorResponse } from '@angular/common/http'; 
import { Injectable } from '@angular/core'; 
import { Observable } from 'rxjs/Observable'; 

import { ToastsManager } from 'ng2-toastr/ng2-toastr'; 

import { Store } from '@ngrx/store'; 
import * as uiActions from '../../core/store/actions/ui.actions'; 
import * as fromRoot from '../../core/store/reducers'; 

import { environment } from '../../../environments/environment'; 

@Injectable() 
export abstract class RestService { 
    protected amiUrl = environment.api; 
    protected maxRetryAttempts = 3; 

    constructor (
    private http: HttpClient, 
    private store: Store<fromRoot.State>, 
    private toastr: ToastsManager) { } 

    private get headers(): HttpHeaders { 
    const headers: HttpHeaders = new HttpHeaders(); 
    headers.set('Authorization', 'Bearer ' + environment.accessToken); 
    return headers; 
    } 

    protected get(url: string) { 
    return this.http.get(this.amiUrl + url, { headers: this.headers }) 
     .let(this.handleRetry); 
    } 

    protected post(url: string, payload: any) { 
    return this.http.post(this.amiUrl + url, payload, { headers: this.headers }) 
     .let(this.handleRetry); 
    } 

    protected delete(url: string) { 
    return this.http.delete(this.amiUrl + url, { headers: this.headers }) 
     .let(this.handleRetry); 
    } 

    protected handleRetry<T>(source: Observable<T>): Observable<T> { 
    return source.retryWhen(e => 
     e.scan((errorCount, error) => { 
     if (errorCount >= this.maxRetryAttempts) { 
      this.store.dispatch(new uiActions.ClearRetryNotificationAction); 
      throw error; 
     } else { 
      this.store.dispatch(new uiActions.CreateRetryNotificationAction({ attempt: errorCount + 1, maxAttempts: this.maxRetryAttempts })) 
      return errorCount + 1; 
     } 
     }, 0) 
     .delay(2000)) 
    } 

    protected handleError(err: HttpErrorResponse, customMessage?: string) { 
    this.store.dispatch(new uiActions.CreateErrorNotificationAction(customMessage)); 

    console.log(err.error); 
    console.log(err.status); 
    console.log(err.name); 
    console.log(err.message); 

    if (!environment.production) { 
     this.toastr.error(customMessage); 
    } 

    return Observable.throw(err.message); 
    } 
}

来源

2017-07-18 wolfhoundjesse

那是因为你正在传递this.handleRetry作为回调。
当调用回调时，范围更改并且this不再引用RestService的实例。

为了解决这个问题提供了四个选项：

（1）使用bind method：

... 
.let(this.handleRetry.bind(this))

（2）使用一个arrow function：

... 
.let(source => this.handleRetry(source))

（3）绑定方法在ctor中：

constructor (
    private http: HttpClient, 
    private store: Store<fromRoot.State>, 
    private toastr: ToastsManager) { 

    this.handleRetry = this.handleRetry.bind(this); 
}

然后当你通过this.handleRetry它已经绑定到实例并且即使在被调用时也会保持这种状态。

（4）使用箭头功能，而不是一个方法：

handleRetry = <T>(source: Observable<T>): Observable<T> => { 
    ... 
}

这将在实例创建类型函数的一个属性，因为它势必有箭头的功能。
虽然这不是一种方法，但它不会成为原型的一部分，因此如果扩展该类，将不会继承它。

来源

2017-07-18 15:17:15

我会知道这是一个重复的问题，我想我的问题作为回调问题。我很惊讶我没有遇到过这个。感谢您对关于类型函数属性未被继承的附加评论。这非常有用。我选择选项4！ – wolfhoundjesse

为什么我不能在rxjs .let（）操作中使用“this”关键字？

回答

相关问题