Question

我有一个程序：

products = []
getAllProducts(){
    this.http.get
    (this.baseUrl + '/products').map((resp:Response) => resp.json())
      .subscribe(
        (data) => {
          const products = data;
          this.products = products;
        },
        err => {}
      );
  }

它确实有效，正确地将收到的列表分配给products变量。我想将它更改为一个函数，它返回上述列表，以便我可以将此代码重用为另一个组件的服务。我试过这样的事情：

getAllProducts(){
    let localProds = [];
    this.http.get
    (this.baseUrl + '/products').map((resp:Response) => resp.json())
      .subscribe(
        (data) => {
          const products = data;
          localProds = products;
        },
        err => {alert("ERROR: GET localhost:3000/products "); localProds = ['ERROR'];}
      );
    return localProds;
  }
this.products = this.getAllProducts();

我认为它应该有效，但事实并非如此。我有两个问题：

1）为什么上述解决方案不起作用？

2）如何使这个函数返回收到的列表，在这种情况下是JSON的列表。

编辑：我同意问题2可能已被标记为重复，只要我知道这样的事实，即异步调用等问题根本存在。正如我不知道的那样，我仍然发现我的整个问题（两个部分）对于像我这样的人来说是独一无二的，新手到前端开发，谁不知道术语“异步调用”。

Answer 1

评论回答了你的第一个问题......因为它是异步的，你不能像那样返回值。

这就是我的服务方法：

getProducts(): Observable<IProduct[]> {
    return this._http.get(this._productUrl)
        .map((response: Response) => <IProduct[]> response.json())
        .catch(this.handleError);
}

在组件中调用服务的代码如下所示：

ngOnInit(): void {
    this._productService.getProducts()
            .subscribe(products => this.products = products,
                       error => this.errorMessage = <any>error);
}

subscribe方法导致http get执行。收到异步响应时，执行作为subscribe方法的第一个参数传入的函数，将local products变量设置为从服务返回的产品。

我在这里有一个完整的例子：https://github.com/DeborahK/Angular2-GettingStarted

执行HTTP GET的TypeScript函数返回列表

1 个答案: