如何发送 HTTP 请求并使用 Angular 取回 json 数据

Question

当用户单击“获取 HTTP 数据”按钮时， app.component中定义的getData()方法会调用http服务的getData()方法，该方法应该返回json数据。 但它返回ZoneAwarePromise object：

export class HttpService {
  jsonFile = '../assets/products.json';

  getData(): Promise<any> {
    return this.http.get(this.jsonFile)
      .toPromise()
      .then(response => {
        console.log(">>> .then got response:", response);
      })
      .catch(this.handleError);
  }

这是 Stackblitz 项目的链接：

https://stackblitz.com/edit/angular-ivy-ukgwct?file=src%2Fapp%2Fhttp.service.ts

如何解决此问题并使 http 服务返回 json 数据？

Answer 1

我已经在 stackblitz 链接中解决了这个问题。 - https://stackblitz.com/edit/angular-ivy-qmq58v?file=src%2Fapp%2Fapp.component.ts

问题是，在服务中，您不订阅可观察对象或在创建期间使用 then 或 cathErrors 听取承诺（这是您的情况）

相反，您应该订阅组件中的服务，您将在其中注入它。