RxJS 6: Observable에서 비동기 처리

17268 단어 RxJS자바스크립트비동기 처리ECMAScript6
RxJS은 Observable 객체를 축으로 한 리액티브 프로그래밍의 JavaScript 라이브러리입니다. 비동기 처리 및 이벤트를 기반으로 코드를 쉽게 조립할 수 있습니다. 이 기사에서는 RxJS Observable에서 웹 API 데이터를로드하려고합니다. RxJS에 대한 자세한 내용은 "RxJS 6 입문"01-07을 읽으십시오.

01 RxJS 라이브러리를 CDN으로 로드



RxJS를 빨리 시도하려면 CDN에서 읽는 것이 쉽습니다. HTML 문서의 <head> 요소에 <script> 요소를 다음과 같이 추가합니다. 이 글을 쓸 때 최신 릴리스 버전은 RxJS 6.2.2입니다.
<script src="https://unpkg.com/rxjs/bundles/rxjs.umd.min.js"></script>

npm 등을 이용한 다른 설치 방법에 대해서는 GitHub의 RxJS 6 "Installation and Usage"또는 "Installation"을 참조하십시오. 그러나 후자의 CDN은 버전 5.0.0으로 연결되지 않은 것 같습니다.

02 간단한 비동기 처리에 Observable을 사용해보기



우선은, Observable (을)를 사용하지 않는 비동기의 처리입니다. 다음의 함수(async())에, setTimeout() 메서드 로 시간 대기의 처리를 정했습니다. 함수의 인수에 건네받은 밀리 세컨드의 뒤에, console.log() 메소드로 캐릭터 라인이 출력됩니다.
function async(arg) {
    console.log('start');
    setTimeout(() =>
        console.log(`${Math.floor(arg / 1000)} second delay is up`)
    , arg);
}
async(1000);

// コンソール出力
start
1 second delay is up

RxJS의 처리는 Observable 객체을 만드는 것으로 시작됩니다. 이를 위한 메서드는 Observable.create()입니다. 건네주는 함수에는, 데이터를 어떻게 처리해 보내는지 정합니다. 데이터를 보내는 메서드는 함수 인수( Observer 객체 )에 대해 호출합니다 Obse r Ver. 뿌리 xt().
Observable 처리를 수행하려면 Observable.subscribe() 메서드을 호출해야 합니다. 인수에 건네주는 함수가, Observer.next() 에 의해 보내 오는 데이터에 어떻게 처리를 더하는지를 정합니다.
const {Observable} = rxjs;
function async(arg) {
    return Observable.create((observer) => {
        console.log('start');
        setTimeout(() => {
            observer.next(arg);
        }, arg);
    });
}
async(1000)
.subscribe(
    (arg) => console.log(`${Math.floor(arg / 1000)} second delay is up`)
);

// コンソール出力
start
1 second delay is up

03 XMLHttpRequest 및 Observable로 웹 API 데이터 로드



다음은 웹에서 공개된 API를 XMLHttpRequest 객체로 로드해 봅니다. API로 사용되는 것은 "Open Notify"의 "How Many People Are In Space Right Now"입니다. NASA의 데이터를 바탕으로 지금 우주에서 얼마나 많은 사람들이 일하고 있는지 알 수 있습니다. XMLHttpRequest 클래스 사용법에 대한 자세한 내용은 "XMLHttpRequest 사용"을 참조하십시오.
XMLHttpRequest 개체에서 데이터를 읽은 후 처리는 load 이벤트의 리스너로 결정됩니다. XMLHttpRequest.response 속성 으로 JSON 데이터를 얻을 수 있으므로, 조사하고 싶은 프로퍼티치를 꺼내면 됩니다.
const url = 'http://api.open-notify.org/astros.json';
function getSpacePeople(url) {
    return Rx.Observable.create((observer) => {
        const request = new XMLHttpRequest();
        request.addEventListener('load', (event) =>
            observer.next(request.response)
        );
        request.open('GET', url);
        request.send();
    });
}
getSpacePeople(url)
.subscribe(
    (data) => console.log(JSON.parse(data).people)
);

04 이벤트 대기 객체를 Observable로 설정



fromEvent() 함수은 이벤트를 기다리는 개체의 Observable를 만듭니다. 인수는 객체와 이벤트의 두 가지입니다. 이전 코드의 XMLHttpRequest 오브젝트가 load 이벤트를 기다리는 처리는 다음과 같이 재기록됩니다.
const {Observable, fromEvent} = rxjs;
const url = 'http://api.open-notify.org/astros.json';
function getSpacePeople(url) {
    return Observable.create((observer) => {
        const request = new XMLHttpRequest();
        /* request.addEventListener('load', (event) =>
            observer.next(request.response)
        ); */
        fromEvent(request, 'load')
        .subscribe((event) => observer.next(request.response));
        request.open('GET', url);
        request.send();
    });
}
getSpacePeople(url)
.subscribe(
    (data) => console.log(JSON.parse(data).people)
);

05 처리 실패 보내기


Observable 처리 실패는 Observer. error()에서 보냅니다. 받은 오류는 Observable.subscribe() 메서드의 두 번째 인수에 전달하는 함수에서 처리합니다. 앞의 코드에 에러의 처리를 더한 것이 다음의 코드입니다. 실제의 움직임을 확인하고 코드를 시도할 수 있도록, 아래의 샘플 001을 jsdo.it에 내걸었습니다.
const {Observable, fromEvent} = rxjs;
const url = 'http://api.open-notify.org/astros.json';
function getSpacePeople(url) {
    return Observable.create((observer) => {
        const request = new XMLHttpRequest();
        fromEvent(request, 'load')
        .subscribe((event) => observer.next(request.response));
        fromEvent(request, 'error')
        .subscribe((event) => observer.error(request));
        request.open('GET', url);
        request.send();
    });
}
getSpacePeople(url)
.subscribe(
    (data) => console.log(JSON.parse(data).people),
    (request) => console.error('エラー:', request.status)
);

샘플 001■RxJS + ES6: Getting number of people in space with Promise object



>>jsdo.it로
TensorFlow Queue를 사용한 비동기 정보
Android에서 비동기 처리(AsyncTask)를 반복하는 방법 알아보기

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage