Angular 2 http get not getting

Question

I new to Angular 2 still learning I am trying to hit a URL with a get call but the get doesn't seem to go through even in browser's network I cannot find that get URL being called.

The program is going to that method console logging above and below that get call but nothing for the get call

My service method

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");
}

Imported HttpModule in app.module.ts

My console Screen shot

Showman

Important thing I missed while debugging: you should subscribe to it to make it work. – Cayman

Answer 1

Http uses rxjs and is a cold/lazy observable, meaning that you should subscribe to it to make it work.

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

Or if you want to subscribe from somewhere else, you should return the http.get method like this:

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();
    });
}

and then :

getAllPersons().subscribe();

Murchison

Thanks,but suppose if we donot call subscribe here but the calling method calls the subscribe why does it work then – Showman

The nest part was not error in console or anywhere :) – Showman

Thanks got it spend nearly 3-4 inorder to get this atlast had to post , there should have been some error to help me :) – Showman

When I was trying to resolve this issue I was getting response undefined and error undefined. Threw me until I found this answer. – Edmon

@Showman , what you're asking is the same as saying : "I haven't subscribed to the newsletter, and I'm not getting any magazines on my doorstep, but there should be an error somewhere telling me something is wrong :":) – Murchison

Need I use return in scuccess response: response.json()? – Saith

I'm doing this as instructed, but still the response is undefined and getting a message "illegal return statement" even though the http get returns correctly according to Chrome and no actual errors are reported. – Poisson

Thanks. Great. Why we must use the subscribe? – Craw

@JeevaJsb #44922288 – Murchison

In my case, only the .suscribe() did the magic. I have been for two hours searching why my backend was not doing their job, and the problem was the frontend was not calling it. Thank you! – Ostracism

Answer 2

As mentioned by Milad in his answer, since Observables returned by Http's methods are cold/lazy and won't fire until you subscribe to them.

But let's say what if you don't want to .subscribe to the Observable but still want the HTTP request to fire?

In case you're using Angular 6 with Rxjs6 and don't want to subscribe , you can do the following:

...
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();
}

Here's a Sample StackBlitz for your ref.

Tedtedd

I must admit this was a surprise. Thanks for showing this! – Giroux

Answer 3

method should return the response of api call using Observable.

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');
  }
}

options & headers are optional.

Note: instead of (<any>) you can define your datatype or any other defined type in which you get data in your response.

Thank You.

Lefkowitz

without Subscribe the call will not be made so after map subscribe is required either in this method or the calling method – Showman

@INFOSYS yes you are right. that we can do in component method were we call our service. – Lefkowitz

this._commonService.getPersonDetails(personId) .subscribe( data => { //code }, error => { this.ajaxLoader.completeLoading(); }, () => { this.ajaxLoader.completeLoading(); } ); – Lefkowitz

Answer 4

Note : Make sure to get response from app.js or some other backend services which is not hosted in same angular port we have to keep running both port . So better to use two terminal as I have used VS code terminal to keep running node server (http://localhost:3000/api/get) and used command prompt to keep running Angular server(http://localhost:4200)

Nonlegal