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

Question

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

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

问题是，在服务中，您没有订阅 observables 或在创建期间使用 then 或 cathErrors 收听承诺（这是您的情况）

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