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();
As mentioned by Milad in his answer, since Observable
s 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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With