How to fire an ajax request in Angular 2?

Question

I have service defined in Angular 2 like this:

import { Inject } from 'angular2/angular2';
import { Http ,Headers , HTTP_PROVIDERS } from 'angular2/http';

export interface CourseInterface {
    courseId: number,
    coursePrice: number,
    authorName: string
}

export class CourseDetailsService {
    http: Http;
    constructor(@Inject(Http) Http) {
        console.log(Http)
        this.http = Http;
    }

    load() {
        console.log("came here in service")
        var headers = new Headers();
        headers.append('Authorization', <my username password>);

        this.http.get('https://some.api',{
            headers : headers
        }).map(res => console.log("Response came!!!"))

        console.log("done . . .")
    }
}

and in another component, I use this service like this:

import {CourseInterface, CourseDetailsService} from '../services/course';

@Component({
    selector: 'dashboard',
    viewBindings: [CourseDetailsService]
})
@View({
    template: `
        <h1>Dashboard page laoded</h1>
  `
})
export class Dashboard {
    constructor(service: CourseDetailsService) {
        service.load();
    }
}

and while running the application, I can see my Dashboard component gets displayed on the screen. But however from the CourseDetailsService, no http calls are getting fired.

But in the console I could able to see the following printed:

came here in service
done . . . .

But in my chrome networks tab, I couldn't able to see any request fired to the specified url. Where I am making mistake?

I'm using Angular 2 Alpha 47

The part that triggers the request it is the subscribe. So do return this.http.get().map(), and then in your component do service.load().subscribe((result) => ...). — Eric Martinez
– Eric Martinez, Commented Dec 5, 2015 at 11:22
@EricMartinez: So it basically returns an Observable? To which I need to subscribe and get my streams? — Ant's
– Ant's, Commented Dec 5, 2015 at 11:24

Eric Martinez · Accepted Answer · 2015-12-05 11:49:32Z

8

Basically the part that triggers the request itself it's the subscribe, so to make it work you have to add it.

// Service
load() {
    var headers = new Headers();
    headers.append('Authorization', <my username password>);

    return this.http.get('https://some.api',{
        headers : headers
    }).map(res => console.log("Response came!!!"))
}

// Component
// 'subscribe' triggers the request!
service.load().subscribe((result) => /* do something with result */);

answered Dec 5, 2015 at 11:49

Eric Martinez

31.9k9 gold badges95 silver badges91 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Ant's Over a year ago

:Totally out of this question, if say I have an array of unique request, like /something,/other, in those cases, how can I return the observables so that the consumer can capture them?

Eric Martinez Over a year ago

My approach would be to create separate methods like : loadSomething, loadOther, where the first case would do a request to https://some.api/something. The rest would look like the answer : service.loadSomething().subscribe(...). Does that make sense to you?

Eric Martinez Over a year ago

Another approach : add a parameter to load(), like load(query) { return http.get(query).subscribe(...)}. This approach is better than the above one.

Nicu Over a year ago

can this approach make synchronous calls ? For example I need the server to validate the user rights for accessing a page and I would like this call to be synchronous and not add an *ngIf to not show the view until the call ends, I don't want to make a normal ajax request if I can use the http service

Gherman Over a year ago

Why they made something such a simple and basic thing so complicated.

Collectives™ on Stack Overflow

How to fire an ajax request in Angular 2?

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related