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