Accès aux données renvoyées par Promise.all

Question

Dans la méthode de service ci-dessous, je transmets deux requêtes parallèles au serveur à l'aide de Promise.all. Les résultats sont renvoyés et stockés dans le tableau productCategoryData. Ce tableau est enregistré sur la console et les données sont vérifiées.

méthode de service

public getProductCategoryData() { 
var productCategoryData = []; 

return Promise.all([this.http.get(this.specialValueUrl), 
    this.http.get(this.applianceBrandUrl)]) 
.then(function(responses) { 
    responses[0].toPromise(). 
    then(response => { 
     let specialvalues: SpecialValue[] = response.json(); 
     productCategoryData[0] = specialvalues; 
     // console.log(specialvalues) 
    }); 

    responses[1].toPromise(). 
    then(response => { 
     let applianceBrands: ApplianceBrand[] = response.json(); 
     productCategoryData[1] = applianceBrands; 
     // console.log(applianceBrands) 
    });   

    return productCategoryData; 
}) 
    } 

Le tableau productCategoryData est ensuite passé à l'élément où il est enregistré une fois de plus à la console. J'affecte ensuite les données du tableau productCategoryData à deux tableaux définis dans le composant: this.specialValues ​​et this.applianceBrands. Mais ils ne sont pas définis lors de la connexion à la console. Je m'attends à ce que ces tableaux aient des données.

méthode des composants:

private getProductCategoryData() { 
this.productCategoryService.getProductCategoryData() 
.then(productCategoryData => { 
    this.specialValues = productCategoryData[0]; 
    this.applianceBrands = productCategoryData[1]; 

    console.log('productCategory.Data = ', productCategoryData) //has data 
    console.log('this.specialValues = ', this.specialValues) //undefined 
    console.log('this.applianceBrands = ', this.applianceBrands) //undefined 

}); 
    } 

Answer 1

Votre question est au sein du service. Il y a quelques choses qui se passent ici.

• http.get renvoie un Observable. Vous devez être abonné ou converti en Promesse.
• Promise.all() fonctionnera normalement pour des promesses, mais passe tout juste dans ce qu'il a été donné pour toute autre chose (comme un Observable ou des variables, etc.)

Pour résoudre ce problème simplement convertir vos Observables (http. get()) aux Promesses et retournez cela. En raison du fait que vous passiez des observables à promise.all(), il semblait que vous deviez ensuite convertir les résultats eux-mêmes en promesses dans le rappel, mais cela n'est pas nécessaire.

c'est tout ce que vous avez besoin:

service:

public getProductCategoryData() { 
    return Promise.all([this.http.get(this.specialValueUrl).toPromise(), 
    this.http.get(this.applianceBrandUrl).toPromise()]) 

} 

composant:

private getProductCategoryData() { 
this.productCategoryService.getProductCategoryData() 
    .then(productCategoryData => { 
     this.specialValues = productCategoryData[0]; 
     this.applianceBrands = productCategoryData[1]; 

     console.log('productCategory.Data = ', productCategoryData) //has data 
     console.log('this.specialValues = ', this.specialValues) //undefined 
     console.log('this.applianceBrands = ', this.applianceBrands) //undefined 

    }); 
    } 

Answer 2

Vous retournez productCategoryData avant d'avoir en lui attribuant la réponse asynchrone via les deux rappels internes then.

Au lieu de cela, convertir en promesses avant d'appliquer Promise.all puis utiliser map pour appliquer la méthode json aux résultats:

return Promise.all([this.specialValueUrl, this.applianceBrandUrl].map(url => 
    this.http.get(url).toPromise() 
).then(responses => responses.map(response => response.json()));