javascript 의 비동기 프로 그래 밍 4 가지 방법

Javascript 언어의 실행 환경 은 '단일 스 레 드' (single thread) 입 니 다.한 번 에 한 가지 임무 만 완수 할 수 있다 는 뜻 이다.만약 여러 가지 임무 가 있다 면 반드시 줄 을 서서 앞의 임 무 를 완성 하고 뒤의 임 무 를 집행 해 야 한다.
이런 모델 의 장점 은 실현 이 비교적 간단 하고 집행 환경 이 상대 적 으로 단순 하 다 는 것 이다.나 쁜 점 은 한 가지 임무 가 오래 걸 리 면 뒤의 임 무 는 줄 을 서서 기 다 려 야 하 며 전체 프로그램의 집행 을 지연 시 킬 수 있다 는 것 이다.흔히 볼 수 있 는 브 라 우 저 응답 (가사) 이 없 는 이 유 는 자바 script 코드 가 장시간 실행 되 기 때 문 입 니 다. (예 를 들 어 순환) 전체 페이지 가 이 곳 에 걸 려 있 고 다른 작업 을 수행 할 수 없습니다.
이 문 제 를 해결 하기 위해 자바 script 언어 는 작업 의 실행 모드 를 동기 화 (Synchronous) 와 비동기 (Asynchronous) 로 나 누 었 습 니 다.'동기 화 모드' 는 바로 이전 단계 의 모드 입 니 다. 다음 작업 은 이전 작업 이 끝 날 때 까지 기다 린 다음 에 실행 합 니 다. 프로그램의 실행 순서 와 작업 의 배열 순서 가 일치 하고 동기 화 됩 니 다.'비동기 모드' 는 완전히 다르다. 모든 임 무 는 하나 이상 의 리 셋 함수 (callback) 가 있다. 앞의 임무 가 끝 난 후에 다음 임 무 를 수행 하 는 것 이 아니 라 리 셋 함 수 를 수행 하 는 것 이다. 다음 임 무 는 앞의 임무 가 끝나 지 않 고 수행 하기 때문에 프로그램의 수행 순서 와 임무 의 배열 순서 가 일치 하지 않 고 비동기 적 이다.비동기 모드 는 매우 중요 하 다.브 라 우 저 쪽 에 서 는 브 라 우 저가 응답 을 잃 지 않도록 오래 걸 리 는 작업 을 비동기 로 실행 해 야 합 니 다. 가장 좋 은 예 는 Ajax 작업 입 니 다.서버 쪽 에 서 는 '비동기 모드' 심지어 유일한 모드 입 니 다. 실행 환경 이 단일 스 레 드 이기 때문에 모든 http 요청 을 동기 화 할 수 있 으 면 서버 성능 이 급 격 히 떨 어 지고 곧 응답 을 잃 을 것 입 니 다.
본 고 는 '비동기 모드' 프로 그래 밍 의 네 가지 방법 을 정리 하여 구조 가 더욱 합 리 적 이 고 성능 이 뛰 어 나 며 유지 가 편리 한 자바 script 프로그램 을 쓸 수 있다 는 것 을 이해 했다.
1. 반전 함수
이것 은 비동기 프로 그래 밍 의 가장 기본 적 인 방법 이다.
두 개의 함수 f1 과 f2 가 있다 고 가정 하고 후 자 는 전자의 집행 결 과 를 기다린다.

f1();
f2();

f1 이 시간 이 많이 걸 리 는 작업 이 라면 f1 을 고 쳐 쓰 고 f2 를 f1 의 호출 함수 로 쓰 는 것 을 고려 할 수 있 습 니 다.

function f1(callback){
    setTimeout(function(){
        //f1    
        callback();
    },1000);
}
//   
f1(f2);

이 반전 함수 가 굳이 setTimeout 을 사용 하지 않 아 도 됩 니 다.
이러한 방식 을 사용 하여 우 리 는 동기 화 작업 을 비동기 작업 으로 바 꾸 었 다. f1 은 프로그램의 운행 을 막 지 않 고 먼저 실행 하 는 프로그램의 주요 논리 에 해당 하 며 시간 이 걸 리 는 작업 을 지연 시 켰 다.
리 셋 함수 의 장점 은 간단 하고 이해 하기 쉬 우 며 배치 하기 쉽다 는 것 이다. 단점 은 코드 의 읽 기와 유지 에 불리 하 다 는 것 이다. 각 부분 간 의 고도 결합 (Coupling) 은 절차 가 혼 란 스 럽 고 모든 작업 은 하나의 리 셋 함수 만 지정 할 수 있다.
2. 사건 감청
다른 사고방식 은 이벤트 구동 모드 를 채택 하 는 것 이다.작업 의 실행 은 코드 의 순서 에 달 려 있 지 않 고 어떤 사건 이 발생 하 느 냐 에 달 려 있다.
아니면 f1 과 f2 를 예 로 들 면우선 f1 에 사건 을 연결 합 니 다.

f1.on('done',f2);

위의 이 코드 는 f1 에 done 사건 이 발생 하면 f2 를 실행 한 다음 에 f1 을 고 쳐 쓰 는 것 을 의미한다.

function f1(){
     setTimeout(function(){
//f1     
f1.trigger('done');
},1000);
}

f1. trigger ('done') 는 실행 이 완료 되면 즉시 done 사건 을 촉발 하여 f2 를 실행 하기 시작 했다 고 밝 혔 다.
이런 방법의 장점 은 이해 하기 쉽 고 여러 사건 을 연결 할 수 있 으 며 모든 사건 은 여러 개의 반전 함 수 를 지정 할 수 있 으 며 '결합 제거' (Decoupling) 를 할 수 있어 모듈 화 에 유리 하 다 는 것 이다.전체 프로그램 이 이벤트 구동 형 으로 바 뀌 어야 한 다 는 단점 이 있어 운행 절차 가 뚜렷 하지 않다.
3. 게시 / 구독 (관찰자 모드)
지난 절의 '사건' 은 '신호' 로 충분히 이해 할 수 있다.
우 리 는 '신호 센터' 가 존재 한다 고 가정 합 니 다. 어떤 임 무 를 수행 하면 신호 센터 에 신 호 를 보 냅 니 다. 다른 임 무 는 신호 센터 에 '구독' (subscribe) 이라는 신 호 를 보 내 서 언제 시작 할 수 있 는 지 알 수 있 습 니 다.이 를 '게시 / 구독 모드' (publish - subscribe pattern) 라 고도 부 르 며 '관찰자 모드' (observer pattern) 라 고도 부른다.
이 모델 은 여러 가지 실현 이 있 습 니 다. 다음은 Ben Alman 의 Tiny Pub / Sub 를 사용 합 니 다. 이것 은 jQuery 의 플러그 인 입 니 다.
우선 f2 는 '신호 센터' jQuery 에 'done' 신 호 를 구독 한다.

jQuery.subscribe("done",f2);

그리고 f1 은 다음 과 같이 고 쳐 쓴다.

function f1(){
　　　　setTimeout(function () {
　　　　　　// f1     
　　　　　　jQuery.publish("done");
　　　　}, 1000);
　　}

jQuery. publish (done) 는 f1 실행 이 완료 되면 '신호 센터' jQuery 에 'done' 신 호 를 보 내 f2 의 실행 을 유발 한 다 는 뜻 이다.
이 밖 에 f2 가 실행 되면 구독 취소 (unsubscribe) 도 가능 하 다.

jQuery.unsubscribe("done", f2);

이런 방법의 성격 은 '사건 감청' 과 유사 하지만 후자 보다 현저히 우수 하 다.우 리 는 '메시지 센터' 를 통 해 얼마나 많은 신호 가 존재 하 는 지, 모든 신호 에 얼마나 많은 구독 자가 있 는 지 알 아 보고 프로그램의 운행 을 감시 할 수 있 기 때문이다.
4. Promises 대상
Promises 대상 은 CommonJS 작업 팀 이 제시 한 규범 으로 비동기 프로 그래 밍 에 통 일 된 인 터 페 이 스 를 제공 하 는 것 이 목적 이다.쉽게 말 하면 모든 비동기 작업 이 Promise 대상 으로 돌아 가 고 이 대상 은 then 방법 이 있어 서 반전 함 수 를 지정 할 수 있 습 니 다.예 를 들 어 f1 의 반전 함수 f2 는 다음 과 같이 쓸 수 있다.

f1().then(f2);

f1 은 다음 과 같이 고 쳐 야 합 니 다.

function f1(){
　　　　var dfd = $.Deferred();
　　　　setTimeout(function () {
　　　　　　// f1     
　　　　　　dfd.resolve();
　　　　}, 500);
　　　　return dfd.promise;
　　}

이렇게 쓰 는 장점 은 리 턴 함수 가 체인 식 쓰기 로 바 뀌 었 고 프로그램의 절 차 는 잘 볼 수 있 으 며 전체적인 조합 방법 이 있어 서 많은 강력 한 기능 을 실현 할 수 있다 는 것 이다.
예 를 들 어 여러 개의 반전 함 수 를 지정 합 니 다.

f1().then(f2).then(f3);

예 를 들 어 오류 가 발생 했 을 때의 반전 함 수 를 지정 합 니 다.

f1().then(f2).fail(f3);

그리고 앞의 세 가지 방법 모두 좋 은 점 이 있 습 니 다. 만약 에 하나의 작업 이 완성 되 었 고 리 셋 함 수 를 추가 하면 이 리 셋 함 수 는 바로 실 행 됩 니 다.그 러 니 어떤 사건 이나 신 호 를 놓 쳤 는 지 걱정 하지 마 세 요.이런 방법의 단점 은 집필 과 이해 가 상대 적 으로 어렵 다 는 것 이다.