JavaScript의 비동기 프로그래밍(콜백, Promise, RxJs)

안녕하세요 여러분. Sergey Omelnitsky님이 연락하셨습니다. 얼마 전 저는 반응형 프로그래밍에 관한 스트림을 주최하여 JavaScript의 비동기성에 대해 이야기했습니다. 오늘 저는 이 자료에 대해 메모를 하고 싶습니다.

하지만 주요 내용을 시작하기 전에 소개 글을 작성해야 합니다. 그럼 정의부터 시작해 보겠습니다. 스택과 큐가 무엇인가요?

스택 후입선출 LIFO 방식으로 요소를 얻는 컬렉션입니다.

열 선입 선출 FIFO 방식으로 요소를 얻는 컬렉션입니다.

좋아, 계속하자.

JavaScript는 단일 스레드 프로그래밍 언어입니다. 이는 실행 스레드가 하나만 있고 함수가 실행을 위해 대기하는 스택이 하나뿐임을 의미합니다. 따라서 JavaScript는 한 번에 하나의 작업만 수행할 수 있는 반면 다른 작업은 호출될 때까지 스택에서 차례를 기다립니다.

호출 스택 간단히 말해서 프로그램에서 우리가 있는 위치에 대한 정보를 기록하는 데이터 구조입니다. 함수에 전달하면 해당 항목을 스택 맨 위로 푸시합니다. 함수에서 돌아올 때 스택의 최상위 요소를 팝하고 함수를 호출한 위치로 돌아갑니다. 이것이 스택이 할 수 있는 전부입니다. 이제 매우 흥미로운 질문입니다. 그러면 JavaScript에서 비동기성은 어떻게 작동합니까?

실제로 브라우저에는 스택 외에도 소위 WebAPI 작업을 위한 특수 대기열이 있습니다. 이 큐의 함수는 스택이 완전히 지워진 후에만 순서대로 실행됩니다. 그 후에야 실행을 위해 큐에서 스택으로 푸시됩니다. 현재 스택에 요소가 하나 이상 있으면 스택에 추가할 수 없습니다. 함수가 가득 차 있는 동안에는 대기열에서 스택으로 이동할 수 없기 때문에 시간 초과로 함수를 호출하는 것이 시간상 정확하지 않은 경우가 많기 때문입니다.

다음 예제를 살펴보고 단계별 구현을 시작해 보겠습니다. 또한 시스템에서 어떤 일이 일어나는지 살펴보겠습니다.

console.log('Hi');
setTimeout(function cb1() {
    console.log('cb1');
}, 5000);
console.log('Bye');

1) 아직 아무 일도 일어나지 않습니다. 브라우저 콘솔은 깨끗하고 호출 스택은 비어 있습니다.

2) 그런 다음 console.log('Hi') 명령이 호출 스택에 추가됩니다.

3) 그리고 그것은 성취되었습니다

4) 그런 다음 console.log('Hi')가 호출 스택에서 제거됩니다.

5) 이제 setTimeout(function cb1() {… }) 명령으로 이동합니다. 호출 스택에 추가됩니다.

6) setTimeout(function cb1() {… }) 명령이 실행됩니다. 브라우저는 Web API의 일부인 타이머를 생성합니다. 카운트다운이 수행됩니다.

7) setTimeout(function cb1() {... }) 명령이 작업을 완료하고 호출 스택에서 제거되었습니다.

8) console.log('Bye') 명령이 호출 스택에 추가됩니다.

9) console.log('Bye') 명령이 실행됩니다.

10) console.log('Bye') 명령이 호출 스택에서 제거됩니다.

11) 최소 5000ms가 지나면 타이머가 종료되고 콜백 cb1이 콜백 대기열에 배치됩니다.

12) 이벤트 루프는 콜백 큐에서 함수 cb1을 가져와 호출 스택에 배치합니다.

13) cb1 함수가 실행되고 호출 스택에 console.log('cb1')가 추가됩니다.

14) console.log('cb1') 명령이 실행됩니다.

15) console.log('cb1') 명령이 호출 스택에서 제거됩니다.

16) 함수 cb1이 호출 스택에서 제거됩니다.

역학의 예를 살펴보겠습니다.

자, 우리는 JavaScript에서 비동기성이 어떻게 구현되는지 살펴보았습니다. 이제 비동기 코드의 발전에 대해 간략하게 이야기해 보겠습니다.

비동기 코드의 진화.

a(function (resultsFromA) {
    b(resultsFromA, function (resultsFromB) {
        c(resultsFromB, function (resultsFromC) {
            d(resultsFromC, function (resultsFromD) {
                e(resultsFromD, function (resultsFromE) {
                    f(resultsFromE, function (resultsFromF) {
                        console.log(resultsFromF);
                    })
                })
            })
        })
    })
});

우리가 JavaScript로 알고 있는 비동기 프로그래밍은 함수에 의해서만 구현될 수 있습니다. 다른 변수처럼 다른 함수에 전달할 수 있습니다. 콜백은 이렇게 탄생했습니다. 그리고 그것은 슬픔, 우울, 슬픔으로 변할 때까지 멋지고, 재미있고, 유쾌합니다. 왜? 간단 해:

• 코드의 복잡성이 증가함에 따라 프로젝트는 빠르게 모호하고 반복적으로 중첩된 블록, 즉 "콜백 지옥"으로 변합니다.
• 오류 처리는 놓치기 쉽습니다.
• return을 사용하여 표현식을 반환할 수 없습니다.

Promise의 출현으로 상황은 조금 나아졌습니다.

new Promise(function(resolve, reject) {
    setTimeout(() => resolve(1), 2000);

}).then((result) => {
    alert(result);
    return result + 2;

}).then((result) => {
    throw new Error('FAILED HERE');
    alert(result);
    return result + 2;

}).then((result) => {
    alert(result);
    return result + 2;

}).catch((e) => {
    console.log('error: ', e);
});

• 코드 가독성을 향상시키는 Promise 체인이 나타났습니다.
• 오류를 잡는 별도의 방법이 등장했습니다.
• Promise.all을 사용하여 병렬 실행 가능성을 추가했습니다.
• async/await를 사용하여 중첩된 비동기성을 해결할 수 있습니다.

그러나 약속에는 한계가 있습니다. 예를 들어, 약속은 탬버린과 함께 춤을 추지 않고는 취소될 수 없으며, 가장 중요한 것은 그것이 하나의 가치로 작동한다는 것입니다.

글쎄요, 우리는 반응형 프로그래밍에 순조롭게 접근했습니다. 피곤한? 다행히도 차를 끓여서 생각해보고 다시 와서 더 많은 내용을 읽을 수 있습니다. 그리고 계속하겠습니다.

리액티브 프로그래밍 데이터 흐름과 변경 전파에 초점을 맞춘 프로그래밍 패러다임입니다. 데이터 스트림이 무엇인지 자세히 살펴보겠습니다.

// Получаем ссылку на элемент
const input = ducument.querySelector('input');

const eventsArray = [];

// Пушим каждое событие в массив eventsArray
input.addEventListener('keyup',
    event => eventsArray.push(event)
);

입력 필드가 있다고 가정해 봅시다. 우리는 배열을 생성하고 있으며 입력 이벤트의 모든 키업에 대해 이벤트를 배열에 저장합니다. 동시에 우리 배열이 시간별로 정렬되어 있다는 점에 주목하고 싶습니다. 이후 사건의 지수는 이전 사건의 지수보다 큽니다. 이러한 배열은 데이터 흐름의 단순화된 모델이지만 아직 흐름은 아닙니다. 이 배열을 안전하게 스트림이라고 부르려면 구독자에게 새 데이터가 도착했음을 어떻게든 알릴 수 있어야 합니다. 따라서 우리는 흐름의 정의에 도달했습니다.

데이터 스트림

const { interval } = Rx;
const { take } = RxOperators;

interval(1000).pipe(
    take(4)
)

흐름 데이터가 변경되었음을 나타낼 수 있는 시간별로 정렬된 데이터 배열입니다. 이제 하나의 작업이 코드의 여러 부분에서 여러 이벤트를 호출해야 하는 코드를 작성하는 것이 얼마나 편리해지는지 상상해 보십시오. 스트림을 구독하기만 하면 변경 사항이 발생할 때 알림을 받게 됩니다. 그리고 RxJs 라이브러리는 이것을 할 수 있습니다.

RxJS 관찰 가능한 시퀀스를 사용하여 비동기 및 이벤트 기반 프로그램으로 작업하기 위한 라이브러리입니다. 라이브러리는 기본 유형을 제공합니다. 주목할 만한, 여러 보조 유형(관찰자, 스케줄러, 주제) 및 컬렉션과 마찬가지로 이벤트 작업을 위한 연산자(매핑, 필터, 축소, 모든 JavaScript Array와 유사한 것).

이 라이브러리의 기본 개념을 이해해 봅시다.

관찰 가능, 관찰자, 생산자

Observable은 우리가 살펴볼 첫 번째 기본 유형입니다. 이 클래스에는 RxJ 구현의 주요 부분이 포함되어 있습니다. 이는 구독 메소드를 사용하여 구독할 수 있는 관찰 가능한 스트림과 연결됩니다.

Observable은 소위 업데이트 생성을 위한 도우미 메커니즘을 구현합니다. 관찰자. Observer의 값 소스는 다음과 같습니다. 생산자. 이는 배열, 반복자, 웹 소켓, 일종의 이벤트 등이 될 수 있습니다. 따라서 Observable은 Producer와 Observer 사이의 지휘자라고 말할 수 있습니다.

Observable은 세 가지 유형의 Observer 이벤트를 처리합니다.

• 다음 – 새로운 데이터
• error – 예외로 인해 시퀀스가 ​​종료된 경우 오류입니다. 이 이벤트는 또한 시퀀스의 완료를 의미합니다.
• 완료 — 시퀀스 완료에 대한 신호입니다. 이는 더 이상 새로운 데이터가 없다는 것을 의미합니다.

데모를 살펴보겠습니다:

처음에는 1, 2, 3, 1초 이후의 값을 처리하겠습니다. 4개를 얻고 스트림을 종료하겠습니다.

큰 소리로 생각하기

그리고 나서 나는 그것에 대해 쓰는 것보다 그것을 말하는 것이 더 흥미롭다는 것을 깨달았습니다. 😀

구독

스트림을 구독하면 새 클래스가 생성됩니다. 신청이는 메소드를 사용하여 구독을 취소할 수 있는 기능을 제공합니다. 수신 거부. 메소드를 사용하여 구독을 그룹화할 수도 있습니다. 더하다. 음, 다음을 사용하여 스레드를 그룹 해제할 수 있다는 것이 논리적입니다. 제거. 추가 및 제거 메소드는 다른 구독을 입력으로 허용합니다. 구독을 취소할 때 마치 unsubscribe 메서드를 호출한 것처럼 모든 하위 구독의 구독이 취소된다는 점을 참고하고 싶습니다. 계속하세요.

스트림 유형

뜨거운
감기

생산자는 관찰 가능 외부에서 생성됩니다.
생산자는 Observable 내부에 생성됩니다.

Observable이 생성될 때 데이터가 전송됩니다.
데이터는 구독 시 제공됩니다.

구독 취소를 위한 추가 논리가 필요합니다.
스레드가 자체적으로 종료됩니다.

일대다 관계를 사용합니다.
일대일 관계를 사용합니다.

모든 구독은 동일한 의미를 갖습니다.
구독은 독립적입니다.

구독하지 않으면 데이터가 손실될 수 있습니다.
새 구독에 대한 모든 스트림 값을 재발행합니다.

비유하자면 핫스트림은 극장에서 상영되는 영화라고 생각하겠습니다. 어느 시점에 도착했는지, 그 순간부터 시청을 시작했습니다. 저는 콜드 플로우를 기술 분야의 통화와 비교하겠습니다. 지원하다. 모든 발신자는 음성 메일 녹음을 처음부터 끝까지 듣지만 수신 거부를 사용하여 전화를 끊을 수 있습니다.

소위 따뜻한 흐름도 있다는 점에 주목하고 싶습니다. (이 정의는 극히 드물게 외국 커뮤니티에서만 접했습니다.) 이것은 차가운 흐름에서 뜨거운 흐름으로 전환되는 흐름입니다. 질문이 발생합니다-어디에서 사용합니까?) 연습에서 예를 들어 보겠습니다.

저는 Angular와 함께 일하고 있습니다. 그는 rxjs를 적극적으로 사용합니다. 서버로 데이터를 수신하려면 콜드 스레드를 예상하고 asyncPipe를 사용하여 템플릿에서 이 스레드를 사용합니다. 이 파이프를 여러 번 사용하고 콜드 스트림의 정의로 돌아가면 각 파이프는 서버로부터 데이터를 요청하게 되는데, 이는 아무리 말해도 이상합니다. 그리고 콜드 스트림을 따뜻한 스트림으로 변환하면 요청이 한 번 발생합니다.

일반적으로 흐름 유형을 이해하는 것은 초보자에게는 상당히 어렵지만 중요합니다.

연산자

return this.http.get(`${environment.apiUrl}/${this.apiUrl}/trade_companies`)
    .pipe(
        tap(({ data }: TradeCompanyList) => this.companies$$.next(cloneDeep(data))),
        map(({ data }: TradeCompanyList) => data)
    );

운영자는 스트림 작업 능력을 확장할 수 있는 기능을 제공합니다. Observable에서 발생하는 이벤트를 제어하는 ​​데 도움이 됩니다. 가장 인기 있는 몇 가지를 살펴보고, 운영자에 대한 자세한 내용은 유용한 정보에 있는 링크를 사용하여 찾을 수 있습니다.

연산자 - 중

보조 연산자부터 시작해 보겠습니다. 간단한 값을 기반으로 Observable을 생성합니다.

연산자 - 필터

필터 연산자는 이름에서 알 수 있듯이 스트림 신호를 필터링합니다. 연산자가 true를 반환하면 더 이상 건너뜁니다.

운영자 - 받아

take — 이미터 수의 값을 취한 후 스레드가 종료됩니다.

연산자 - debounceTime

debounceTime - 출력 사이에 지정된 시간 간격 내에 속하는 방출된 값을 삭제합니다. 시간 간격이 경과한 후 마지막 값을 방출합니다.

const { Observable } = Rx;
const { debounceTime, take } = RxOperators;

Observable.create((observer) => {
  let i = 1;
  observer.next(i++);
  // Испускаем значение раз в 1000мс
  setInterval(() => {
    observer.next(i++)
  }, 1000);

 // Испускаем значение раз в 1500мс
  setInterval(() => {
    observer.next(i++)
  }, 1500);
}).pipe(
  debounceTime(700),  // Ожидаем 700мс значения прежде чем обработать
  take(3)
);  

연산자 - takeWhile

takeWhile이 false를 반환할 때까지 값을 내보낸 후 스레드에서 구독을 취소합니다.

const { Observable } = Rx;
const { debounceTime, takeWhile } = RxOperators;

Observable.create((observer) => {
  let i = 1;
  observer.next(i++);
  // Испускаем значение раз в 1000мс
  setInterval(() => {
    observer.next(i++)
  }, 1000);
}).pipe(
  takeWhile( producer =>  producer < 5 )
);  

연산자 - 결합최신

CombineLatest 연산자는 promise.all과 다소 유사합니다. 여러 스레드를 하나로 결합합니다. 각 스레드가 최소한 하나의 방출을 수행한 후 배열 형태로 각 스레드에서 최신 값을 얻습니다. 또한 병합된 스트림에서 방출된 후에는 새로운 값을 제공합니다.

const { combineLatest, Observable } = Rx;
const { take } = RxOperators;

const observer_1 = Observable.create((observer) => {
  let i = 1;
  // Испускаем значение раз в 1000мс
  setInterval(() => {
    observer.next('a: ' + i++);
  }, 1000);
});

const observer_2 = Observable.create((observer) => {
  let i = 1;
  // Испускаем значение раз в 750мс
  setInterval(() => {
    observer.next('b: ' + i++);
  }, 750);
});

combineLatest(observer_1, observer_2).pipe(take(5));

연산자 - zip

Zip - 각 스레드의 값을 기다리고 이러한 값을 기반으로 배열을 형성합니다. 값이 어떤 스레드에서도 나오지 않으면 그룹이 형성되지 않습니다.

const { zip, Observable } = Rx;
const { take } = RxOperators;

const observer_1 = Observable.create((observer) => {
  let i = 1;
  // Испускаем значение раз в 1000мс
  setInterval(() => {
    observer.next('a: ' + i++);
  }, 1000);
});

const observer_2 = Observable.create((observer) => {
  let i = 1;
  // Испускаем значение раз в 750
  setInterval(() => {
    observer.next('b: ' + i++);
  }, 750);
});

const observer_3 = Observable.create((observer) => {
  let i = 1;
  // Испускаем значение раз в 500
  setInterval(() => {
    observer.next('c: ' + i++);
  }, 500);
});

zip(observer_1, observer_2, observer_3).pipe(take(5));

연산자 - forkJoin

forkJoin도 스레드를 조인하지만 모든 스레드가 완료될 때만 값을 내보냅니다.

const { forkJoin, Observable } = Rx;
const { take } = RxOperators;

const observer_1 = Observable.create((observer) => {
  let i = 1;
  // Испускаем значение раз в 1000мс
  setInterval(() => {
    observer.next('a: ' + i++);
  }, 1000);
}).pipe(take(3));

const observer_2 = Observable.create((observer) => {
  let i = 1;
  // Испускаем значение раз в 750
  setInterval(() => {
    observer.next('b: ' + i++);
  }, 750);
}).pipe(take(5));

const observer_3 = Observable.create((observer) => {
  let i = 1;
  // Испускаем значение раз в 500
  setInterval(() => {
    observer.next('c: ' + i++);
  }, 500);
}).pipe(take(4));

forkJoin(observer_1, observer_2, observer_3);

연산자 - 지도

맵 변환 연산자는 이미터 값을 새로운 값으로 변환합니다.

const {  Observable } = Rx;
const { take, map } = RxOperators;

Observable.create((observer) => {
  let i = 1;
  // Испускаем значение раз в 1000мс
  setInterval(() => {
    observer.next(i++);
  }, 1000);
}).pipe(
  map(x => x * 10),
  take(3)
);

운영자 - 공유, 탭

탭 연산자를 사용하면 부작용, 즉 시퀀스에 영향을 주지 않는 모든 작업을 수행할 수 있습니다.

공유 유틸리티 운영자는 콜드 스트림을 핫 스트림으로 바꿀 수 있습니다.

운영자와의 작업은 끝났습니다. 주제로 넘어가겠습니다.

큰 소리로 생각하기

그리고 차를 마시러 갔습니다. 나는 이러한 예에 지쳤습니다 😀

대상가족

주제군은 뜨거운 흐름의 대표적인 예입니다. 이러한 클래스는 관찰 가능 및 관찰자 역할을 동시에 수행하는 일종의 하이브리드입니다. 주제가 핫스레드이므로 구독을 취소해야 합니다. 주요 방법에 대해 이야기하면 다음과 같습니다.

• 다음 – 새 데이터를 스트림으로 전송
• error - 오류 및 스레드 종료
• 완료 – 스레드 완료
• 구독 – 스트림 구독
• unsubscribe – 스트림 구독을 취소합니다.
• asObservable – 관찰자로 변환
• toPromise – 약속으로 변환됩니다.

과목은 4 5가지가 있습니다.

큰 소리로 생각하기

스트림에서 4명이 이야기를 하고 있었는데 알고 보니 한 명이 더 추가된 것이었습니다. 그들이 말했듯이 살고 배우십시오.

간단한 주제 new Subject()– 가장 간단한 유형의 주제입니다. 매개변수 없이 생성되었습니다. 구독 후 받은 값만 전송합니다.

행동 주제 new BehaviorSubject( defaultData<T> ) – 제 생각에는 가장 일반적인 유형의 주제입니다. 입력은 기본값을 사용합니다. 구독 시 전송되는 최신 호의 데이터를 항상 저장합니다. 이 클래스에는 스트림의 현재 값을 반환하는 유용한 값 메서드도 있습니다.

재생주제 new ReplaySubject(bufferSize?: number, windowTime?: number) — 입력은 선택적으로 자체적으로 저장할 값의 버퍼 크기를 첫 번째 인수로 취하고 두 번째 인수로 변경이 필요한 시간을 취할 수 있습니다.

비동기주제 new AsyncSubject() — 구독 시 아무 일도 일어나지 않으며 완료될 때만 값이 반환됩니다. 스트림의 마지막 값만 반환됩니다.

웹소켓주제 new WebSocketSubject(urlConfigOrSource: string | WebSocketSubjectConfig<T> | Observable<T>, destination?: Observer<T>) — 문서에는 그에 대한 내용이 없으며 저는 처음으로 그를 뵙습니다. 그가 무엇을 하는지 아는 사람이 있다면 적어주시면 추가하겠습니다.

휴. 자, 오늘 말씀드리고 싶은 내용은 모두 다 다루었습니다. 이 정보가 도움이 되었기를 바랍니다. 유용한 정보 탭에서 참고문헌 목록을 직접 읽어보실 수 있습니다.

유용한 정보

• 스트림 링크
• JS 작동 방식: 엔진 개요, 런타임 메커니즘, 호출 스택
• JS 작동 방식: 이벤트 루프, 비동기 및 async/await를 사용하여 코드를 개선하는 XNUMX가지 방법
• JavaSript에서 이벤트 루프가 작동하는 방식
• 비동기 JavaScript의 진화
• RxJS란 무엇이며, RxJS를 아는 것이 왜 유용한가요?
  
• RxJS의 실제 적용
• RxJS Observable 튜토리얼 — Observable 생성 및 구독
• RXJS: 핫 및 콜드 Observable
• Observable을 생성하기 위한 클래스, 함수. 운영자.
• 예제를 통한 RxJS 연산자
• API 목록
• RxJS의 다양한 주제와 일정

출처 : habr.com