Angular 2 http得不到

时间:2016-12-29 13:59:47

标签: angular angular-http

我刚开始学习Angular 2我正在尝试使用get调用来访问一个URL,但即使在浏览器的网络中,get似乎也没有通过我无法找到获取URL的内容。

该程序将进入上面和下面的方法控制台记录,但是获取调用没有任何内容

我的服务方法

import { Headers, Http, Response } from '@angular/http';
import { Injectable } from '@angular/core';
import { Persons } from './mock-people';
import { Person } from './person';
import {Observable} from 'rxjs/Rx';

getAllPersons(): void {
  console.log("Here");
  this.http.get(`http://swapi.co/api/people/1`)
    .map((response: Response) => {
      console.log(response.json());
      response.json();
    });
  console.log("Comes here 2");
}

在app.module.ts中导入HttpModule

我的控制台屏幕截图

Console]

4 个答案:

答案 0 :(得分:86)

Http使用rxjs并且是一个冷/懒惰的可观察对象,这意味着你应该订阅它以使其工作。

this.http.get(`http://swapi.co/api/people/1`)
  .map((response: Response) => {
    console.log(response.json());
    response.json();
  })
  .subscribe();

或者,如果您想从其他地方订阅,则应该返回http.get方法,如下所示:

getAllPersons(): Observable <any> {
  console.log("Here");
  return this.http.get(`http://swapi.co/api/people/1`)
    .map((response: Response) => {
      console.log(response.json());
      return response.json();
    });
}

然后:

getAllPersons().subscribe();

答案 1 :(得分:1)

方法应该使用Observable返回api调用的响应。

  

<强> service.cs

import { Http, Jsonp, Response, Headers, RequestOptions } from '@angular/http';
import { Injectable } from '@angular/core';
import { Persons } from './mock-people';
import { Person } from './person';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/forkJoin';

@Injectable()
export class Service {
  constructor(private jsonp: Jsonp, private _http: Http) { }

  getAllPersons():Observable<any>{
    console.log("Here");

    let headers = new Headers({ 'Content-Type': 'application/json' });
    let options = new RequestOptions({ headers: headers, method: 'get' });

    return this._http.get('http://swapi.co/api/people/' + personId)
        .map((res:Response) => {
            return <any>res.json();
        })
        .catch(this.handleError);          

    console.log("Comes here 2");
  }

  private handleError(error: Response) {
    console.error(error);
    return Observable.throw(error.json().error || ' error');
  }
}

选项&amp;标题是可选的。

注意:您可以定义数据类型或在响应中获取数据的任何其他已定义类型,而不是(<any>)。

谢谢。

答案 2 :(得分:0)

正如Milad在他的tutorial中所提到的那样,由于Http方法返回的Observable是冷/懒惰的,只有在您subscribe对其使用之后才会触发。

但是,如果您不想.subscribeObservable,但仍然希望触发HTTP请求怎么办?

如果您将Angular 6与Rxjs6一起使用并且不想subscribe ,则可以执行以下操作:

...
import { publish } from 'rxjs/operators';
import { HttpClient } from '@angular/common/http';

constructor(private http: HttpClient) {}

getAllPersons() {
  const getAllPersons$ = this.http.get(`https://swapi.co/api/people/1`)
    .pipe(
        publish()
      );

  getAllPersons$.connect();
}

这是您推荐的answer

答案 3 :(得分:0)

注意:确保从app.js或一些其他后端服务获得响应,这些服务不在同一角度端口中托管,我们必须继续运行这两个端口。所以最好使用两个终端,因为我使用VS代码终端来保持运行节点服务器(http:// localhost:3000 / api / get)并使用命令提示符来保持运行Angular服务器(http:// localhost:4200)< / p>