我有以下代码,这是一个简单的服务,可以返回到服务器以获取一些数据:
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”指的是另一个对象,还是 ActionSerivce 的局部变量在发生 http 异常时为空。经过身份验证的局部变量已正确注入(inject)(我在构造函数中做了一个 console.log,它就在那里)。
最佳答案
问题是您没有在回调函数中绑定(bind) 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 => {
//...
}
关于http - Angular 2私有(private)变量消失,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38951327/