web-dev-qa-db-ja.com

Angular 2 http getが取得されません

Angular 2を初めて使用すると、get呼び出しでURLをヒットしようとしていますが、ブラウザーのネットワークでもgetが通過しないようです。getURLが呼び出されていることがわかりません。

プログラムは、その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をインポートしました

私のコンソールのスクリーンショット

Console]

angularangular-http
43
user7161814

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();
89
Milad

メソッドは、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');
  }
}

オプションとヘッダーはオプションです。

注：（<any>）の代わりに、応答でデータを取得するデータ型またはその他の定義済みの型を定義できます。

ありがとうございました。

1
Amol Bhor

Miladが answer で述べたように、Httpのメソッドによって返されるObservablesはコールド/レイジーであり、subscribeになるまで起動しません。

しかし、.subscribeをObservableにしたくないが、それでもHTTPリクエストを起動したい場合はどうでしょうか？

Rxjs6でAngular 6を使用しており、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();
}

参照用の StackBlitz のサンプルをご覧ください。

0
SiddAjmera