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等待等待接收与您可以进行的并发呼叫一样多的空员工响应（这样，您可以确保所有其他响应都已完成）