Ionic 2/Angular 2 Versprechen, observable

Question

Ich habe eine Situation, in der ich ein Stück Daten aus dem Speicher in einer Ionic 2-Anwendung abrufen muss und dann diese Daten verwenden, um eine HTTP-Anfrage zu erstellen. Das Problem, auf das ich stoße, ist, dass die SqlStorage-Methoden Versprechungen zurückgeben und das http-Meth eine Observable zurückgibt. Ich habe so etwas zu tun, um es an die Arbeit:

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

und dann so etwas zu tun, um es zu arbeiten:

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

Ich bin sehr neu zu Winkel- und Ionic Im Allgemeinen habe ich das Gefühl, dass es einen viel besseren Weg gibt, um das zu erreichen, was ich versuche, aber ich weiß einfach nicht wie. Auch alle verfügbaren Ressourcen da draußen über Observables sehr kompliziert sehr schnell, die eine beeinflussbare junge Entwickler wie mich sehr verwirrt verlässt.

Kann jemand etwas Licht darauf werfen, wie man das besser macht? Vielen Dank!

Answer 1

In Winkel 2, die Http Servicefunktionen (get, post, usw.) geben Sie eine Observable object zurück. Dies ist nur die Art, wie sie es implementiert haben.

Wenn Sie an Versprechen gewöhnt sind und möchten, dass Ihr Dienst stattdessen ein Versprechen zurückgibt, können Sie die toPromise Funktion verwenden, die in Observable Objekte eingebaut ist.

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

Und dann

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

Hier ist, was Sie tun können:

Ihr Code unter

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

Änderungen

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

Dann können Sie es in Ihrer Komponente wie jede andere beobachtbare verbrauchen.

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

Answer 3

Ich habe es mit einer Kombination aus Observable.fromPromise() und .flatMap() zu arbeiten:

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

Sie müssen auch diese Importe hinzu:

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

Answer 4

Verwenden 'Observable.fromPromise ' Versprechen zu beobachtbar zu konvertieren.