Question

我有一个很奇怪的问题。我有组件ProductListItemsComponent，在ngOnInit中，我执行了方法getCategoryFromServer和getProductList()。看起来像这样：

ngOnInit() {
  this.productsService.getCategoryFromServer();
  this.getProductList();
}

方法getCategoryFromServer在我的服务ProductsService中：

getCategoryFromServer() {
  this.dataStorageServiceServiceta.getCategory().subscribe((category: CategoryModel[]) => {
    this.categoryModule = category;
    this.cateogoryChange.next(this.categoryModule.slice())
  })
}

方法getProductList()在我的组件中，如下所示：

getProductList() {
  this.subscription = this.route.params
    .subscribe((params: Params) => {
      this.categoryName = params['category'];
      this.singleProducts = this.productsService.getListOfProduct(this.categoryName);
    })
}

问题是因为开始执行getCategoryFromServer并跳过执行，然后执行getProductList，然后执行getCategoryFromServer。但是我需要先执行getCategoryFromServer，然后再执行getCategoryFromServer。

Answer 1

似乎您在这里谈论的是可观察的异步。解决此问题的一种简单方法是将您的ProductsService调用getCategoryFromServer()包装在Promise中。

getCategoryFromServer(): Promise<CategoryModel[]> {
    return new Promise((resolve, reject) => {
        this.dataStorageServiceServiceta.getCategory().subscribe(
            (category: CategoryModel[]) => {
                this.categoryModule = category;
                this.cateogoryChange.next(this.categoryModule.slice());
                resolve(this.categoryModule.slice());
            },
            (error) => reject(error)
        );
    });
}

在这里，您看到我已将我们的原始呼叫包装在一个Promise中，现在您还可以查看订阅是否成功，我们调用了解析器并传回数据（您不必这样做，您不能传递任何东西，并且一切正常。此外，我还在您的订阅中添加了错误处理功能，以在您的订阅发生问题时拒绝诺言。

要在ngInit中使用它，现在看起来像这样。

ngOnInit() {
    this.getCategoryFromServer().then((cat: CategoryModel[]) => {
        this.getProductList();
    }).catch( (reason: any) => {
        // error handling here
    });
}

现在，您已经成功地找到了一种方法，可以知道您的异步调用已经完成并可以运行您的getProductList()方法。

参数url不执行get方法表单服务器

1 个答案: