Question

我试图使用继承为我的服务创建一个通用错误处理程序，但出于某种原因，当它到达错误处理程序本身时，＆＃39;这个＆＃39;总是看似无效，我无法弄清楚为什么。我可以很好地进入错误处理程序，但我总是得到：

EXCEPTION：Uncaught（在promise中）：TypeError：无法读取属性＆＃39; HTTP＆＃39;为null

知道我错过了什么/做错了吗？不知道＆＃39;这个＆＃39;可以永久吗？

这是我服务的整个基类：

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';

@Injectable()
export class HttpServiceBase {

    constructor(public http: Http) {
        console.log('http', this.http); //just do this to prove that it is there - it is!
    }

    handleError(error: any): Promise<any> {
        console.error('Application Error', error); //this logs fine

        // TypeError: Cannot read property 'http' of null
        this.http.get('/Account/IsLoggedIn')
            .map(response => console.log('RESPONSE: ', response));

        return Promise.reject(error.message || error);
    }
}

这是我继承的课程：

import 'rxjs/add/operator/toPromise';
import { Injectable } from '@angular/core';
import { Headers, Http } from '@angular/http';
import { HttpServiceBase } from './http-service.base';
import { Hero } from './hero';

@Injectable()
export class HeroService extends HttpServiceBase {

    private headers = new Headers({ 'Content-Type': 'application/json' });
    private heroesUrl = 'http://localhost:57569/Home/Heroes';

    constructor(http: Http) { super(http); }

    getHeroes(): Promise<Hero[]> {
        console.log('getting heroes');

        return this.http.get(this.heroesUrl + '-force-error') //so it will error out
            .toPromise()
            .then(response => response.json() as Hero[] )
            .catch(this.handleError);
    }
}

Answer 1

这是因为您将 handleError 作为函数传递给catch函数。当它被调用时，它会有一个不同的这个对象。

您可以将箭头功能传递给 catch 保留相同的上下文。

.catch(error => this.handleError(error));

你必须记住，即使 handleError 被定义为一个类的方法，它仍然像任何其他函数一样。

Answer 2

对于应该用作回调的方法，建议将它们绑定到构造上下文。在TypeScript中，这可以通过类字段和箭头方法实现：

constructor(public http: Http) {}

handleError = (error: any): Promise<any> { ... }

与方法调用上的绑定相反，这消除了不正确上下文的可能性。

更优选的方式可能是：

constructor(public http: Http) {
  this.handleError = this.handleError.bind(this);
}

handleError(error: any): Promise<any> { ... }

它做同样的事情，但具有更好的可测试性，因为它允许在类实例化之前监视/模拟HttpServiceBase.prototype.handleError。

Answer 3

这有什么机会解决它吗？

.catch(this.handleError.bind(this));

angular2服务基类继承 - 为什么＆＃39;这个＆＃39;空值？

3 个答案: