如何發送 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 聽取承諾（這是您的情況）

相反，您應該訂閱組件中的服務，您將在其中注入它。