create a synchronous http.get()

Question

Im trying to handle a login via promises and http.get but i fail so hard I get following error :

Object doesn't support property or method 'toPromise'

My code is :

return this.http.get('http://localhost:5000/login/', {
  headers: authHeader
}).map((response) => {
  return response.json()
}).toPromise(null);

ive got it from :

https://github.com/johnpapa/angular2-there-and-back-again/blob/master/src/app/core/character.service.ts

UPDATE :

JohnPapa updated his project my friends

https://github.com/johnpapa/angular2-there-and-back-again/blob/master/app/core/character.service.ts

Answer 1

I wonder if you actually use promise since the HTTP support of Angular relies on Observables.

To get the response, you simply need to return the observable for your call:

getSomething() {
  return this.http.get('http://localhost:5000/login/', {
    headers: authHeader
  }).map((response) => {
    return response.json()
  })
}

When calling the method, you can then register callbacks using the subscribe method:

getSomething().subscribe(
  data => handleData(data),
  err => reject(err));

If you really want to use promises (with the toPromise method), you should import this:

import 'rxjs/Rx';

See this issue for more details: https://github.com/angular/angular/issues/5632#issuecomment-167026172.

Otherwise, FYI calls aren't synchronous regarding HTTP in browsers...

Hope it helps you, Thierry

Answer 2

If you want, you can use a TypeScript wrapper for sync-request library.

This TypeScript strongly-typed, fluent wrapper library is ts-sync-request.

ts-sync-request on npm

With this library, you can make sync http calls like below:

Your TypeScript classes:

class Request
{
    Email: string;
}

class Response
{
    isValid: boolean;
}

Install package in project:

 npm i ts-sync-request

Then

import { SyncRequestClient } from 'ts-sync-request/dist'

GET:

    let email = "[e-mail]";
    let url = "http://localhost:59039/api/Movies/validateEmail/" + email;

    var response = new SyncRequestClient()
                                .addHeader("Authorization", "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE1NDc2OTg1MzgsIm5iZiI6MTU0NzY5NDIxOCwiaHR0cDovL3NjaGVtYXMueG1sc29hcC5vcmcvd3MvMjAwNS8wNS9pZGVudGl0eS9jbGFpbXMvbmFtZSI6InN0cmluZyIsImh0dHA6Ly9zY2hlbWFzLm1pY3Jvc29mdC5jb20vd3MvMjAwOC8wNi9pZGVudGl0eS9jbGFpbXMvcm9sZSI6InN0cmluZyIsIkRPQiI6IjEvMTcvMjAxOSIsImlzcyI6InlvdXIgYXBwIiwiYXVkIjoidGhlIGNsaWVudCBvZiB5b3VyIGFwcCJ9.qxFdcdAVKG2Idcsk_tftnkkyB2vsaQx5py1KSMy3fT4")
                            .get<Response>(url);

POST:

    let url = "http://localhost:59039/api/Movies/validateEmailPost";
    let request = new Request();
    request.Email = "[e-mail]";

    var response = new SyncRequestClient()
                                .addHeader("Authorization", "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE1NDc2OTg1MzgsIm5iZiI6MTU0NzY5NDIxOCwiaHR0cDovL3NjaGVtYXMueG1sc29hcC5vcmcvd3MvMjAwNS8wNS9pZGVudGl0eS9jbGFpbXMvbmFtZSI6InN0cmluZyIsImh0dHA6Ly9zY2hlbWFzLm1pY3Jvc29mdC5jb20vd3MvMjAwOC8wNi9pZGVudGl0eS9jbGFpbXMvcm9sZSI6InN0cmluZyIsIkRPQiI6IjEvMTcvMjAxOSIsImlzcyI6InlvdXIgYXBwIiwiYXVkIjoidGhlIGNsaWVudCBvZiB5b3VyIGFwcCJ9.qxFdcdAVKG2Idcsk_tftnkkyB2vsaQx5py1KSMy3fT4")
                            .post<Request, Response>(url, request);

Hope this helps.