调用http函数时不会触发XHR请求

时间:2016-12-21 16:48:35

标签: javascript ajax angular angular2-services

我正在努力在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

1 个答案:

答案 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请求时要执行的操作   生成成功事件(使用事件有效负载中的数据)或   失败事件(有效载荷中的错误)。