Angular的可觀察和Http調用

Question

當我調用http get方法時，Angular返回可觀察到的值。 因此，我創建了本地服務器以返回50 MB的JSON文件，其中包含如下所示的所有員工數據。

import { Injectable } from "@angular/core";
import { Http } from "@angular/http";
import 'rxjs/add/operator/map';
@Injectable()
export class DataServiceService {
  constructor(private _http: Http) {}

  getEmployeeData() {
    return this._http
      .get("http://localhost:3000/employees")
      .map(response => response.json());
  }
}

App.Component.html

{{employeeData$ | async}}

他們說可觀察是隨時間變化的數據流。我的印象是，使用可觀察的全部目的是在員工流開始返回數據后立即開始顯示數據。 但是在上面的示例中，我看到的是我的頁面空白30秒鍾 ，然后突然所有員工數據開始顯示。

那么使用observable有什么意義呢？ 我不能只是將整個數據加載到本地數組中，然后用它在HTML上顯示它嗎？

有沒有辦法實現這種行為，例如，一旦它開始接收第一位員工，就開始在html上呈現它...，以便用戶可以開始查看數據，而不必等待30秒。

我了解在真正的應用程序中，我應該只提取用戶可以在瀏覽器視圖中看到的員工數量，然后加載下一組員工。

Answer 1

Angular的HTTP Observable僅在流完成后（即所有數據都已傳輸時）才產生-因此，它只產生一次，一個值。

我想說BE沒有太多問題，那30秒似乎只是因為它是一個巨大的JSON：序列化/反序列化它的工作量可能要花費大量時間，然后您還必須通過電線下載50兆歐。

您可以做的是嘗試進行自己的“漸進式” http調用，每次獲得新塊（使用低級XMLHttpRequest或嘗試找到執行此操作的庫）時，該調用都會返回員工流。

但是，然后嘗試解析不完整的JSON以獲取“到目前為止我收到的數據”是一個糟糕的主意。 為此，我什至會考慮多個HTTP請求，每個請求具有分頁功能，因此您將獲得所需的N-n-N員工。

使用此方法的一些示例代碼：

function getEmployeeStream():Rx.Observable<Employee[]> {
    return Rx.Observable.interval(100)
        .concatMap(
            i => getEmployees(i)
        )
        .takeUntil(
            employees => employees.length === 0
        )
        .scan(
            (allEmployees, receivedEmployees) => allEmployees.concat(receivedEmployees),
            []
        );
}

function getEmployees(page:number):Rx.Observable<Employee[]> {
    return this.http(...)
        .map(data => parseEmployees(data));
}

因此，此操作是每100毫秒生成一個新事件，然后將每個事件轉換為對服務器的分頁調用，然后在獲取員工時告訴它繼續進行，最后將它們連接到單個數組中，以便async管。

如果要進行多個並發調用以更快地獲取數據，則需要將concatMap交換為具有concurrent參數集的mergeMap ，然后解決上一次使用employees.length === 0調用會阻止的情況。正在運行的呼叫以通過流（因此丟棄那些未完成的呼叫）。 我能想到的是.takeUntil等待等待接收與您可以進行的並發呼叫一樣多的空員工響應（這樣，您可以確保所有其他響應都已完成）