Ionic 2/Angular 2 promise returning observable

Question

I have a situation where I need to fetch a piece of data from storage in an Ionic 2 application and then use that data to create an HTTP request. The problem that I am running i

Answer 1

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;
});    

Answer 2

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';

Answer 3

Use ' Observable.fromPromise ' to convert promise to observable.

Answer 4

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
});