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 into is that the SqlStorage methods return promises and the http meth returns an observables. I'm having to do something like this to get it to work:

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

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

and then doing something like this to get it to work:

this.tokenService.loadStuff().then(observable => {
    observable.subscribe(data => {
         this.storage.set('stuff', data);
         return data;
    });
})

I'm very new to Angular and Ionic in general, so I feel like there is a much better way to accomplish what I'm trying to do, but I just don't know how. Also, all of the available resources out there about observables get very complicated very quickly which leaves an impressionable young developer like me very confused.

Can anyone shed some light on how to do this any better? Thanks!

Answer 1

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

Answer 2

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