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

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 方法的函数被执行，将本地 products 变量设置为从服务返回的产品。

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