Angular 2 http 获取不到

Question

我是 Angular 2 的新手，仍在学习中我正在尝试通过 get 调用调用 URL，但即使在浏览器的网络中，get 似乎也无法通过我找不到 get URL 被呼叫。

程序将转到该方法的控制台记录 get 调用的上方和下方，但 get 调用没有任何记录

我的服务方式

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

我的控制台截图

Answer 1

Http 使用 rxjs 并且是 cold/lazy 可观察的，这意味着您应该订阅它以使其工作。

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

或者如果您想从其他地方订阅，您应该 return 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();

Answer 2

方法应该 return 使用 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');
  }
}

选项和 headers 是可选的。

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

谢谢。

Answer 3

正如 Milad 在他的中提到的，因为 Http 的方法返回的 Observable 是 cold/lazy 并且在您 subscribe 之前不会触发。

但假设您不想 .subscribe 到 Observable 但仍希望触发 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();
}

这里有一个 Sample StackBlitz 供您参考。

Answer 4

注意：确保从 app.js 或未托管在同一 angular 端口的某些其他后端服务获得响应，我们必须保留运行这两个端口。最好使用两个终端，因为我使用 VS 代码终端来保留运行节点服务器 (http://localhost:3000/api/get) 并使用命令提示符来保留运行 Angular 服务器(http://localhost:4200)

Angular 2 http 获取不到

Angular 2 http get not getting

angular-http

angular