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

Question

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

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 数据？

标签： angulartypescriptpromiserequestobservable

Answer 1

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

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

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