CODEWITHSUNDEEP
angular
Red Virus
Red Virus

Reputation: 1707

HTTP request doesn't fire off

I am new to Angluar and was following a video tutorial to make HTTP Request and getting the response data. For some reason the code I used doesn't fire off the http.get.

import { Component, Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

@Injectable()
export class AppComponent {

  constructor( private http: Http ){
    console.log('Until here works');
    this.http.get('https://jsonplaceholder.typicode.com/posts').map(data => {
      console.log('Finished');
      console.log( data );
    });
  }

}

Upvotes: 3

Views: 1142

Answers (3)

DeborahK
DeborahK

Reputation: 60518

This is from the documentation:

The http.get does not send the request just yet. This Observable is cold, which means that the request won't go out until something subscribes to the Observable.

See this link for more information and a detailed example: https://angular.io/docs/ts/latest/guide/server-communication.html

Here is a specific example:

getProducts(): Observable<IProduct[]> {
    return this._http.get(this._productUrl)
        .map((response: Response) => <IProduct[]> response.json())
        .do(data => console.log('All: ' +  JSON.stringify(data)))
        .catch(this.handleError);
}

And then subscribe to it as so:

ngOnInit(): void {
    this._productService.getProducts()
            .subscribe(products => this.products = products,
                       error => this.errorMessage = <any>error);
}

Upvotes: 2

Rahul Singh
Rahul Singh

Reputation: 19622

You have to make use of Services instead of Directly using it in Components as Services are meant to be Reusable using Angular Dependency Injection. If you are new i would suggest you to go through services once as these are integral part of an angular application.

I have a Repo that deals with Some Basic Angular Concepts and Services are one of them Please check it out hope it helps , i have a life example too for the same in gh-pages.

https://github.com/rahulrsingh09/AngularConcepts

https://rahulrsingh09.github.io/AngularConcepts

Upvotes: 1

isuruAb
isuruAb

Reputation: 2240

We use Services to minimize the number of code lines and development time.

make a separate service using angular-cli command ng g s Get this will make a new service for you.but you need to add it as a provider in app.module.ts like this.

or if you are not using anular-cli make a file get.service.ts file and follow these steps

Check this sample application i made.

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
import { GetService } from './get.service';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [GetService],
  bootstrap: [AppComponent]
})
export class AppModule { }

add these codes in to get.service.ts

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { Observable } from 'rxjs/Observable'; 
import 'rxjs/add/operator/map';
@Injectable()
export class GetService {

  constructor(private http: Http) { }
  getData() {
    this.http.get('https://jsonplaceholder.typicode.com/posts').map(m => m.json()
    ).subscribe(k => { console.log(k) }); // we have to subscribe for get data out
  }
}

app.component.ts should be like this.

import { Component,Injectable } from '@angular/core';
import { Http } from '@angular/http';

import { GetService } from './get.service';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app works!';
  constructor(private _service : GetService ){
    this._service.getData();
  }
}

read more about services here

Upvotes: 1

Related Questions