Ionic 2/Angular 2 obiecująca powracająca obserwowalna

Question

Mam sytuację, w której muszę pobrać dane z pamięci w aplikacji Ionic 2, a następnie użyć tych danych do utworzenia żądania HTTP. Problem, na który napotykam, polega na tym, że metody SqlStorage zwrócą obietnice, a metoda http meth zwraca obserwowalne dane. Mam zrobić coś takiego, aby zmusić go do pracy:

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

a potem robi coś takiego, aby zmusić go do pracy:

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

Jestem bardzo nowy kątowe i jonowe ogólnie, więc czuję, że jest o wiele lepszy sposób na zrealizowanie tego, co próbuję zrobić, ale po prostu nie wiem jak. Poza tym wszystkie dostępne zasoby o obserwowalnych obiektach bardzo szybko stają się bardzo skomplikowane, co sprawia, że ​​młody młody programista, taki jak ja, jest bardzo zdezorientowany.

Czy ktoś może rzucić trochę światła na to, jak to zrobić lepiej? Dzięki!

Answer 1

W funkcji kątowej 2 funkcje usługi Http (get, post itp.) Zwracają wartość Observable object. Tak po prostu je wdrożyli.

Jeśli jesteś przyzwyczajony do obietnic i chcesz, aby Twoja usługa zwróciła obietnicę, możesz użyć funkcji toPromise zbudowanej w obiektach Observable.

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

A potem

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

Oto co można zrobić:

Twój kod poniżej

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

zmiany

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

Następnie w swoim komponencie można go spożywać tak, jak każdy inny obserwowalny.

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

Answer 3

Dostałem go do pracy przy użyciu kombinacji Observable.fromPromise() i .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; 
}); 

Trzeba także dodać te Import:

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

Answer 4

Wpisz "Observable.fromPromise ', aby przekonwertować obietnicę do obserwowalnego.