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

그들은 관찰 말은 없단를 통해 변경할 수있는 데이터의 흐름이 관찰 사용하는 요점은을 보여주는 시작이라는 인상이었다입니다 직원의 스트림이 데이터를 반환하기 시작하자마자 데이터를 반환합니다. 그러나 위의 예에서 내가 목격 한 것은 내 페이지가 30 초 &이면 갑자기 모든 직원 데이터가 표시되기 시작한다는 것입니다.

그러면 관찰 가능을 사용하는 요점은 무엇입니까? 그냥 로컬 배열의 전체 데이터를로드 할 수 없다 & 그런 다음 내 HTML에 표시하려면 사용 하시겠습니까?

첫 번째 직원을 받기 시작하자마자 html로 렌더링을 시작하면 사용자가 30 초 동안 기다리지 않고 데이터를 볼 수 있습니다.

실제 앱에서는 브라우저의 뷰에서 볼 수있는 직원 수만을 가져와야한다고 생각합니다. & 다음 직원 집합을로드합니다.

Answer 1

각도의 HTTP 모든 데이터가 전송되었을 때 스트림이 완료되었을 때만 관측 가능 - 따라서 하나의 시간, 하나의 단일 값만 산출됩니다.

나는 BE에 너무 많은 문제가 없다고 말하고 싶다. 30 초는 단지 거대한 JSON 인 것 같다. 직렬화/비 직렬화 작업의 양은 시간이 많이 걸릴 수있다. 당신은 또한 50 Megs를 다운로드해야합니다.

새로운 청크를 얻을 때마다 (저수준 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)); 
} 

그래서 이것은 무엇을 한 후, 서버에 매겨진 호출에 각 이벤트를 변환, 새로운 이벤트를 100ms마다 생성하는 반면에 계속하도록 지시하다 우리는 직원을 얻고 마침내 그것들을 하나의 배열로 연결하여 async 파이프로 사용할 수 있습니다. 당신이 빠르게 데이터를 얻을 동시 통화를 확인하려면

, 당신은 concurrent 파라미터 세트와 mergeMap에 대한 concatMap를 교환해야하고, 다음 employees.length === 0와 마지막 호출이 실행을 방지 할 수있는 경우를 해결합니다 스트림을 통과하기위한 호출 (따라서 완료되지 않은 호출은 삭제됨).내가 생각할 수있는 무엇입니까 .takeUntil 당신이 가질 수있는 동시 호출만큼 많은 빈 직원 응답을 받기를 기다리는 것입니다. (이 방법으로 다른 모든 응답이 완료되었는지 확인하십시오)