我正在努力在angular2中设置一个应该与REST后端通信的服务。
我正在尝试设置一个最小的示例,该示例应该将请求发送到休息后端并处理响应。正确调用服务,我的控制台显示消息
'召唤星球大战api';
问题是我正在检查浏览器开发工具的网络部分中的xhr选项卡,并且没有xhr请求被触发。 似乎函数extractData和handleError似乎都没有被调用,尽管我在map和catch中定义了它们。
我在这里遗漏了什么吗?为什么我打电话给这项服务时没有发送xhr请求?
这是我的服务:
import { Injectable } from '@angular/core';
import { Http, Response, Headers } from '@angular/http';
import { Observable } from 'rxjs/Rx';
import { Token } from './token';
@Injectable()
export class UserService {
constructor(private http: Http) {
}
getAll() : Observable<Token[]>{
console.log('calling the star wars api');
let people$ = this.http
.get('http://swapi.co/api/people', {headers: this.getHeaders()})
.map(this.extractData)
.catch(this.handleError);
return people$;
}
private getHeaders(){
let headers = new Headers();
headers.append('Accept', 'application/json');
return headers;
}
private extractData(res: Response) {
console.log('data extracted!');
let body = res.json();
return body.data || { };
}
private handleError (error: Response | any) {
// In a real world app, we might use a remote logging infrastructure
console.log('an error ocurred');
let errMsg: string;
if (error instanceof Response) {
const body = error.json() || '';
const err = body.error || JSON.stringify(body);
errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
} else {
errMsg = error.message ? error.message : error.toString();
}
console.error(errMsg);
return Observable.throw(errMsg);
}
}
我使用angular-cli设置项目,组件和服务。我使用的是angular2版本2.4.0
答案 0 :(得分:1)
感谢0x2D9A3的评论,我能够解决这个问题。
问题在于我从我的组件调用UserService的方式。
this.userService.getAll()
刚刚调用了服务但没有触发任何XHR请求。
Howewer,
this.userService.getAll().subscribe((result) => {
if (result) {
console.log('successfull xhr request');
}
}
是否已成功调用xhr请求,因为这是必须使用Observable的方式。
这是来自角度docs
将Observable视为某些来源发布的事件流。 要侦听此流中的事件,请订阅Observable。 这些订阅指定Web请求时要执行的操作 生成成功事件(使用事件有效负载中的数据)或 失败事件(有效载荷中的错误)。