Ionic 2/Angular 2 promise returning observable Ionic 2/Angular 2 promise returning observable angularjs angularjs

Ionic 2/Angular 2 promise returning observable


Here's what you can do:

Your code below

 getToken() {    return this.storage.get('token').then((token) => {        this.token = token;        return token;    }); }

changes to

getToken: Observable<any> =     Observable.fromPromise(this.storage.get('token').then(token => {    //maybe some processing logic like JSON.parse(token)    return token;}));

Then in your component you can consume it like would any other observable.

this.serviceClass.getToken.subscribe(token => { //whatever you want to with the token});


In angular 2, the Http service functions (get, post, etc.) return an Observable object. This is just the way they implemented it.

If you're used to promises, and want your service to return a promise instead, you can use the toPromise function that's built in Observable objects.

loadStuff(){    return this.tokenService.getToken().then(token => {        return this.http.get("https://www.urltodatasource.com/api/v1/Endpoint?access_token="+token).toPromise());    });}

And then

this.tokenService.loadStuff().then(data => {    data = data.json(); //you might need to do that, depending on the structure of the response    this.storage.set('stuff', data);    return data;});    


I got it to work using a combination of Observable.fromPromise() and .flatMap():

getToken() {    return Observable.fromPromise(this.storage.get('token')    .then((token) => {        return token;    }));}loadStuff(){    return this.tokenService.getToken()    .flatMap(token => {        return this.http.get("https://www.urltodatasource.com/api/v1/Endpoint?access_token="+token)        .map(res => {            return res.json();        });    });}this.tokenService.loadStuff().subscribe(data => {    this.storage.set('stuff', data);    return data;});

You'll also need to add these imports:

import { Observable } from 'rxjs/Observable';import 'rxjs/add/operator/map';import 'rxjs/add/observable/fromPromise';import 'rxjs/add/operator/mergeMap';