Observable＆Http calls with Angular

Question

http getメソッドを呼び出すと、角度返り値が観測されます。そこで私は50MBの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}} 

が観測使用しての全体のポイントは、表示を開始しているという印象の下にあったtime.Iとともに変化する可能性があり、データのストリームであります従業員のストリームがデータを返すとすぐにデータを返します。 上記の例で私の目撃者は、私のページが30秒 &であれば、突然すべての従業員データが表示されることです。

次に、観測可能な点は何ですか？ローカル配列のデータ全体をロードすることはできません&それを使ってHTMLに表示しますか？

最初の従業員の受付を開始すると、htmlでのレンダリングを開始するなどの方法で、30秒待たずにデータを見ることができます。

実際のアプリケーションでは、ブラウザのビューでユーザーが見ることができる従業員のうちの＃人だけを取得する必要があります。&次に従業員のセットを読み込みます。

Answer 1

角度のHTTPすべてのデータが転送されたときに、ストリームが完了したときにのみ得られます。したがって、1回限りの1つの値しか得られません。

BEにはあまりにも多くの問題はありませんが、30秒は巨大なJSONのようだと思います。シリアル化/デシリアライズする作業の量は大きな時間を要し、その後あなたはまた、ワイヤを通じて50メガをダウンロードする必要があります。

新しいチャンクを取得するたびに（低レベルのXMLHttpRequestを使用するか、これを実行するライブラリを探す）、従業員のストリームを返す独自の "プログレッシブ" http呼び出しを作成することができます。

しかし、私が今までに受け取ったデータを得るために不完全なJSONを解析しようとするのはひどい考えです。そのためには、それぞれにページネーションを含む複数の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)); 
} 

だから、これは何をするか、その後、その後、サーバーにページ分割コールに各イベントを変換し、新しいイベントごとに100ミリ秒を生成しながら、上で続けるためにそれを教えています従業員を取得し、最終的にそれらを単一の配列に連結して、asyncパイプで使用することができます。

あなたはより高速なデータを取得するために多くの同時通話をしたい場合は、あなたがconcurrentパラメータセットとmergeMapためconcatMapを交換する必要があり、その後、employees.length === 0との最後の呼び出しが実行されないだろうというケースを回避しますよストリームを通過するためのコール（したがって、未完了のコールを破棄）。私が考えることができるのは、.takeUntilです。あなたは同時呼び出しと同じくらい多くの空の従業員の応答を受け取るのを待つことができます（このようにすれば、他のすべての応答が完了したことを確認できます）