web-dev-qa-db-fra.com

La propriété 'subscribe' n'existe pas sur le type 'Promise'

Je ne comprends toujours pas comment fonctionne rxjs.

Je crée une application Ionic qui fait une demande à mon serveur et attend json. J'ai réussi à m'abonner à un http.post et à obtenir les données dont j'ai besoin.

Cependant, maintenant mon problème est que je dois passer un jeton d'authentification dans la demande http que j'obtiens de Storage. Il s'agit d'un problème car je dois attendre que le stockage soit prêt et j'obtiens ma valeur de jeton avant d'appeler la demande http.post.

C'est ici que j'essaye d'obtenir mes données JSON

getPlanograms() {

    //API URL
    let requestURL = 'https://myapiurlhere';
    let headers = new Headers({'Content-Type': 'application/json'});

    return this.storage.ready().then(() => {

        return this.storage.get('id_token').then((val) => {

            headers.append('Authorization', 'Bearer ' + this.authCredentials.token);
            let options = new RequestOptions({headers: headers});
            return this.http.post(requestURL, {}, options)
                .map(response => <Planogram[]>response.json());

        })
    });
}

Qui est appelé d'ici

 ionViewDidLoad (){
    this.merchandisingDataService.getPlanograms()
        .subscribe(Planogram => this.planograms = Planogram);
}

Cependant, lorsque j'essaie de le faire, j'obtiens l'erreur suivante

La propriété 'subscribe' n'existe pas sur le type 'Promise'.

Quelle serait la meilleure façon d'atteindre mon objectif?

javascriptangularrxjsionic3
9
dr_ermio

Suite à la suggestion de caffinatedmonkey, je me suis retrouvé avec cette fonction de travail:

    getPlanograms() {

    //API URL
    let requestURL = 'https://myapiurlhere';

    return Observable
        .fromPromise(this.storage.get('id_token'))
        .flatMap(token =>{
            let headers = new Headers({'Content-Type': 'application/json'});
            headers.append('Authorization', 'Bearer ' + token);
            let options = new RequestOptions({headers: headers});
            return this.http.get(requestURL, options)
                .map(response => <Planogram[]>response.json())
                .catch(this.handleError);
        }
    );
}
1
dr_ermio

Vous pouvez consommer avec .then() en changeant:

ionViewDidLoad () {
    this.merchandisingDataService.getPlanograms()
        .then(Planogram => this.planograms = Planogram);
}

Ou, vous pouvez faire en sorte que getPlanograms renvoie un Observable.

getPlanograms() {   

    // API URL
    let requestURL = 'https://myapiurlhere';
    let headers = new Headers({'Content-Type': 'application/json'});

    // this converts from promise to observable
    return Observable.fromPromise(this.storage.ready()
        .then(() => this.storage.get('id_token'))
        .then((val) => {
            headers.append('Authorization', 'Bearer ' + this.authCredentials.token);
            let options = new RequestOptions({headers: headers});

            return this.http.post(requestURL, {}, options)

                // map converts from observable to promise
                // (returned by response.json())
                .map(response => <Planogram[]>response.json());
        });
    }));
}

Vous pouvez maintenant consommer avec .subscribe() comme vous l'avez fait dans la question.

9
0xcaff