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秒＆amp;然后，所有员工数据突然出现。

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

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

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

Answer 1

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

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

你可以做的就是尝试制作自己的＆＃34;进步的＆＃34;每次获得新块时都会返回一个员工流的http调用（使用低级XMLHttpRequest，或尝试查找执行此操作的库）。

然后尝试解析一个不完整的JSON来获取我迄今收到的数据＆＃34;是个糟糕的主意。为此，我甚至会考虑在每个请求上加上多个HTTP请求，因此您可以获得所需的N-by-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));
}

所以这样做是每100ms生成一个新事件，然后将每个事件转换为对服务器的分页调用，然后告诉它继续进行，同时我们得到员工并最终将它们连接成一个数组，这样就可以了由async管道使用。

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

可观察的＆amp; Http调用Angular

1 个答案: