使用Angular进行Observable和Http调用

Question

当我调用http get方法时，Angular返回observable。所以我创建了本地服务器以返回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}}

他们说，observable是一个可能随时间变化的数据流。我的印象是，使用observable的重点是在员工流开始返回数据后立即开始显示数据。但是在上面的示例中，我看到的是我的页面空白30秒，然后突然显示所有员工数据。

那么使用observable有什么意义呢？我不能只是将整个数据加载到本地数组中，然后使用它在我的HTML上显示它？

是否有任何方法可以实现这样的行为，例如，一旦它开始收到第一个员工，就开始在html上呈现它......这样用户就可以开始查看数据而不是等待30秒。

我知道在真正的应用程序中，我应该只获取用户可以在浏览器视图中看到的＃员工，然后加载下一组员工。

Answer 1

Angular qazxsw poi Observable仅在流完成时才会产生，这是，当所有数据都已传输时 - 因此它只产生一次，一个单一值。

我说BE没有太多问题，30秒似乎只是因为它是一个巨大的JSON：序列化/反序列化它的工作量可能需要很长一段时间，然后你还需要通过电线下载50 Megs。

您可以做的就是尝试进行自己的“渐进式”http调用，每次获得新块时都会返回一个员工流（使用低级XMLHttpRequest，或尝试查找执行此操作的库）。

但是，然后尝试解析一个不完整的JSON来获取“我迄今收到的数据”是一个糟糕的主意。为此，我甚至会考虑在每个请求上加上多个HTTP请求，因此您可以获得所需的N-by-N员工。

遵循此方法的一些示例代码：

HTTP

所以它的作用是每100ms生成一个新事件，然后将每个事件转换为对服务器的分页调用，然后告诉它继续进行，同时我们获得员工并最终将它们连接成一个数组，以便

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));
}

可以使用它管。

如果你想进行许多并发调用以更快地获取数据，你需要使用async参数集交换concatMap以获取mergeMap，然后解决使用concurrent的最后一次调用将阻止正在运行的调用通过的情况流（因此丢弃那些未完成的呼叫）。我能想到的是employees.length === 0等待接收与你可以拥有的并发呼叫一样多的空员工响应（这样你就可以确保完成所有其他响应）