자 바스 크 립 트 비동기 프로 그래 밍 의 4 가지 방법

참고:http://www.ruanyifeng.com/blog/2012/12/asynchronous%EF%BC%BFjavascript.html 자바 script 언어의 실행 환경 은 '단일 스 레 드' (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);

이러한 방식 을 사용 하여 우 리 는 동기 화 작업 을 비동기 작업 으로 바 꾸 었 다. 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 은 다음 과 같이 고 쳐 써 야 합 니 다.

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

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

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

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

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

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