1

我有以下代码，这是一个简单的服务，可以返回到服务器以获取一些数据：

import { Injectable } from '@angular/core';
import { Action } from '../shared';
import { Http, Response, Headers, RequestOptions } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import { Authenticated } from '../authenticated';
import 'rxjs/Rx';

@Injectable()
export class ActionsService {
    private url = 'http://localhost/api/actions';
    constructor(private http: Http, private authenticated : Authenticated) {}

getActions(search:string): Observable<Action[]> {
    let options = this.getOptions(false);

    let queryString = `?page=1&size=10&search=${search}`; 
    return this.http.get(`${this.url + queryString}`, options)
                .map(this.extractData)
                .catch(this.handleError);
}

private extractData(response: Response) {
    let body = response.json();
    return body || { };
}

private handleError (error: any) {      
    let errMsg = (error.message) ? error.message : error.status ? `${error.status} - ${error.statusText}` : 'Server error';    
    console.error(errMsg); // log to console instead

    if (error.status == 403) {            
      this.authenticated.logout();
    }

    return Observable.throw(errMsg);
}     

private getOptions(addContentType: boolean) : RequestOptions {
    let headers = new Headers();
    if (addContentType) {
      headers.append('Content-Type', 'application/json');  
    }

    let authToken = JSON.parse(localStorage.getItem('auth_token'));        
    headers.append('Authorization', `Bearer ${authToken.access_token}`);

    return new RequestOptions({ headers: headers });
  }
}

除了 handleError 之外，一切都按预期工作。一旦 getActions 从服务器收到错误，它就会进入 this.handleError 方法，该方法再次正常工作，直到应该调用 this.authenticated.logout() 的部分。this.autenticated 是未定义的，我不确定是否是因为“this”是指另一个对象，或者当发生 http 异常时，ActionSerivce 的局部变量是否为空。经过身份验证的局部变量被正确注入（我在构造函数中做了一个console.log，它就在那里）。

4

1 回答 1

2

问题是您没有this在回调函数中绑定上下文。您应该http像这样声明您的电话，例如：

return this.http.get(`${this.url + queryString}`, options)
                .map(this.extractData.bind(this))    //bind
                .catch(this.handleError.bind(this)); //bind

另一种选择可能是传递一个匿名函数并从那里调用回调：

return this.http.get(`${this.url + queryString}`, options)
                .map((result) => { return this.extractData(result)})
                .catch((result) => { return this.handleError(result}));

还有一个选择是声明你的回调函数有点不同，你可以保持你http以前的方式：

private extractData: Function = (response: Response): any => {
    let body = response.json();
    return body || { };
}

private handleError: Function = (error: any): any => {    
    //...
}
于 2016-08-15T08:05:43.303 回答