Ionic 2/Angular 2 promessa di ritorno osservabile

Question

Ho una situazione in cui ho bisogno di recuperare un pezzo di dati dalla memoria in un'applicazione Ionic 2 e quindi utilizzare quei dati per creare una richiesta HTTP. Il problema che sto incontrando è che i metodi SqlStorage restituiscono promesse e il meth http restituisce un osservabile. Sto avendo a fare qualcosa di simile per farlo funzionare:

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

e poi fare qualcosa di simile per farlo funzionare:

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

Sono molto nuovo per angolare e ionico in generale, quindi mi sento come se ci fosse un modo migliore per realizzare ciò che sto cercando di fare, ma semplicemente non so come. Inoltre, tutte le risorse disponibili sugli osservabili ottengono molto complicato molto rapidamente che lascia un giovane sviluppatore impressionabile come me molto confuso.

Qualcuno può far luce su come farlo meglio? Grazie!

Answer 1

In angolare 2, le funzioni di servizio Http (get, post, ecc) restituiscono un Observable object. Questo è solo il modo in cui lo hanno implementato.

Se si è abituati alle promesse e si desidera che il servizio restituisca una promessa, è possibile utilizzare la funzione toPromise incorporata negli oggetti Observable.

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

E poi

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

Ecco cosa si può fare:

tuo codice qui sotto

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

modifiche

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

Quindi nel componente è possibile consumarlo come qualsiasi altro osservabile.

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

Answer 3

ho preso a lavorare utilizzando una combinazione di Observable.fromPromise() e .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; 
}); 

Avrete anche bisogno di aggiungere queste importazioni:

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

Answer 4

Utilizzare 'Observable.fromPromise ' per convertire la promessa in osservabile.