Question

在下面的服务方法中，我使用Promise.all将两个并行查询传递给服务器。返回结果并存储在productCategoryData数组中。此阵列将记录到控制台并验证数据。

服务方法

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

然后将productCategoryData数组传递给组件，然后再将其记录到控制台。然后，我将productCategoryData数组的数据分配给组件中定义的两个数组：this.specialValues和this.applianceBrands。但是在登录控制台时它们是未定义的。我希望这些数组有数据。

组件方法：

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

您的问题在服务范围内。这里有几件事情。

http.get返回 Observable 。必须订阅或转换为承诺。
Promise.all（）会为promises正常工作，但只会传递给其他任何东西（比如Observable或变量等）。

要解决此问题，只需将Observables（http.get（））转换为Promises并返回。

由于您将observable传递给promise.all（），因此您似乎需要将结果本身转换为回调中的promise，但这是不必要的。

这就是你所需要的：

<强>服务

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

}

<强>组件：

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

在通过两个内部productCategoryData回调为其分配异步响应之前，您将返回then。

相反，在应用Promise.all之前转换为承诺，然后使用map将json方法应用于结果：

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

访问Promise.all返回的数据

2 个答案: