jQuery 의 Promise 의 구체 적 인 사용법 을 알 고 있 습 니 다.

앞서 ES6 의 Promise 대상 을 알 아 봤 으 니 jQuery 의 Promise,즉 jQuery 의 Deferred 대상 을 살 펴 보 자.
브 라 우 저의 콘 솔 을 엽 니 다.

<script>
  var defer = $.Deferred();
  console.log(defer);
</script>

실행 결과:
 
ES6 의 Promise 대상 과 비슷 하 게 생 겼 습 니 다.jQuery 의 Deferred 대상 도 resolve,reject,then 방법 이 있 고 done,fail,always...방법 도 있 습 니 다.jQuery 는 이 Deferred 대상 으로 비동기 작업 의 반전 함 수 를 등록 하여 비동기 작업 의 상 태 를 수정 하고 전달 하 는 것 입 니 다.
Deferred:

<script>
  function runAsync(){
    var defer = $.Deferred();
    //       
    setTimeout(function(){
      console.log('    ');
      defer.resolve('             ');
    }, 1000);
    return defer;
  }
  runAsync().then(function(data){
    console.log(data)
  });
</script>

실행 후 Deferred 대상 의 인 스 턴 스 defer 는 resolve 방법 을 통 해"비동기 요청 이 성공 한 후에 돌아 온 데이터"를 then 방법 으로 전송 하여 수신,인쇄 합 니 다.
ES6 의 Promise 와 비슷 하지만 약간의 차이 가 있 습 니 다.Promise 를 살 펴 보 겠 습 니 다.

<script>
  function runAsync(){
    var p = new Promise(function(resolve, reject){
      
      setTimeout(function(){
        console.log('    ');
        resolve('             ');
      }, 1000);
    });
    return p;      
  }

  runAsync().then(function(data){
    console.log(data);
  });
</script>

우 리 는 발견:
1.Deferred 대상 을 만 들 때 전달 되 지 않 음;Promise 대상 을 만 들 때 인 자 를 전 달 했 습 니 다(익명 함 수 를 전 달 했 고 함수 에 도 두 개의 인자 가 있 습 니 다:resolve,reject).
2.Deferred 대상 이 resolve 방법 을 직접 호출 했 습 니 다.Promise 대상 은 내부 에서 호출 된 resolve 방법 입 니 다.
설명:Deferred 대상 자체 에 resolve 방법 이 있 고 Promise 대상 은 구조 기 에서 resolve 방법 을 실행 하여 Promise 대상 에 게 실행 결 과 를 부여 한 상태 입 니 다.
이렇게 하면 단점 이 있 습 니 다.Deferred 대상 이 자체 적 으로 resolve 방법 을 가지 고 있 기 때문에 Deferred 대상 을 받 은 후에 수시로 resolve 방법 을 호출 할 수 있 습 니 다.그 상 태 는 수 동 으로 관여 할 수 있 습 니 다.

<script>
  function runAsync(){
    var defer = $.Deferred();
    //       
    setTimeout(function(){
      console.log('    ');
      defer.resolve('             ');
    }, 1000);
    return defer;
  }
　　 var der = runAsync();
　 　der.then(function(data){
    console.log(data)
　 　});
 　　der.resolve('     '); 
</script>

 이렇게 되면 외부 에서 Deferred 에 직접 상 태 를 설정 하고'외부 에서 끝 납 니 다'를 인쇄 합 니 다.1s 후에'실행 완료'를 인쇄 하고'비동기 요청 이 성공 한 후에 돌아 오 는 데이터'를 인쇄 하지 않 습 니 다.
분명히 이것 은 좋 지 않다.데이터 도 못 받 고 외부 에서 끝내 라 고 비동기 요청 을 했 는데..........................................................
물론 이 구 덩이 는 jQuery 가 작성 할 것 입 니 다.Deferred 대상 에 promise 방법 이 있 습 니 다.제 한 된 Deferred 대상 입 니 다.

<script>
  function runAsync(){
    var def = $.Deferred();
    //       
    setTimeout(function(){
      console.log('    ');
      def.resolve('           ');
    }, 2000);
    return def.promise(); //      
  }
</script>

제 한 된 Deferred 대상 이란 resolve 와 reject 방법 이 없 는 Deferred 대상 입 니 다.이렇게 하면 밖에서 Deferred 대상 의 상 태 를 바 꿀 수 없습니다.
Deferred 대상 의 then 방법 과 done,fail 문법 사탕
ES6 의 Promise 규범 에서 then 방법 은 두 개의 매개 변 수 를 받 아들 이 는 것 을 알 고 있 습 니 다.각각 실행 완료 와 실행 실패 의 반전 이 고 jquery 에서 강화 되 었 으 며 세 번 째 매개 변 수 를 받 아들 일 수 있 습 니 다.바로 pending 상태 에서 의 반전 입 니 다.다음 과 같 습 니 다.deferred.then( doneFilter [, failFilter ] [, progressFilter ] )then 방법:

<script>
  function runAsync(){
    var def = $.Deferred();
    //       
    setTimeout(function(){
       var num = Math.ceil(Math.random()*10); //  1-10    
        if(num<=5){
          def.resolve(num);
        }
        else{
          def.reject('     ');
        }
    }, 2000);
    return def.promise(); //      
  }

  runAsync().then(function(d){
    console.log("resolve");
    console.log(d);
  },function(d){
    console.log("reject");
    console.log(d);
  })

</script>

Deferred 대상 의 then 방법 도 체인 조작 을 할 수 있 습 니 다.
done,fail 문법 설탕 은 실행 완료 와 실행 실패 의 리 셋 을 지정 하 는 데 사 용 됩 니 다.이 코드 와 등가 입 니 다.

<script>
  function runAsync(){
    var def = $.Deferred();
    //       
    setTimeout(function(){
       var num = Math.ceil(Math.random()*10); //  1-10    
        if(num<=5){
          def.resolve(num);
        }
        else{
          def.reject('     ');
        }
    }, 2000);
    return def.promise(); //      
  }

  runAsync().done(function(d){
    console.log("resolve");
    console.log(d);
  }).fail(function(d){
    console.log("reject");
    console.log(d);
  })

</script>

always
jquery 의 Deferred 대상 에 always 방법 이 있 습 니 다.실행 이 완료 되 든 실 패 를 하 든 always 가 실 행 됩 니 다.ajax 의 complete 와 유사 합 니 다.
$.when 의 용법
jquery 에는 Promise 를 실현 하 는$.when 방법 이 있 습 니 다.ES6 의 all 방법 기능 과 마찬가지 로 비동기 작업 을 병행 하고 모든 비동기 작업 이 실 행 된 후에 야 리 셋 함 수 를 실행 합 니 다.그러나$.when 은$.Deferred 에 정의 되 지 않 았 습 니 다.이름 만 봐 도$.when 은 단독 적 인 방법 입 니 다.ES6 의 all 인자 와 조금 다 릅 니 다.배열 이 아니 라 여러 개의 Deferred 대상 을 받 아들 입 니 다.다음 과 같 습 니 다.

<script>
 function runAsync(){
    var def = $.Deferred();
    //       
    setTimeout(function(){
       var num = Math.ceil(Math.random()*10); //  1-10    
       def.resolve(num);  
    }, 2000);
    return def.promise(); //      
  }
  $.when(runAsync(), runAsync(), runAsync()) .then(function(data1, data2, data3){
　　　　 console.log('      ');
　　　　 console.log(data1, data2, data3);
　　});
</script>

jquery 에 ES6 같은 race 방법 없 나 요?빨리 달 리 는 걸 기준 으로 하 는 그 방법 이 야.네,jquery 에는 없습니다.
이상 은 jquery 에서 Deferred 대상 을 자주 사용 하 는 방법 입 니 다.
이전 편 과 이 편 에 서 는 비동기 요청 대신 일회용 타이머 로 데이터 처 리 를 했다.왜 ajax 를 사용 하지 않 았 습 니까?귀찮아 서가 아니 라 ajax 와 Deferred 의 관 계 를 말씀 드 리 겠 습 니 다.
jquery 의 ajax 는 제 한 된 Deferred 대상 을 되 돌려 줍 니 다.즉,resolve 방법 과 reject 방법 이 없 으 면 외부 에서 상 태 를 바 꿀 수 없습니다.Deferred 대상 이 라면 위 에서 말 한 모든 특성 을 ajax 도 사용 할 수 있 습 니 다.예 를 들 어 체인 호출,여러 요청 연속 발송:

<script>
req1 = function(){
  return $.ajax(/* **** */);
}
req2 = function(){
  return $.ajax(/* **** */);
}
req3 = function(){ 
　　return $.ajax(/* **** */);
}
req1().then(req2).then(req3).done(function(){ console.log('      '); });
</script>

success,error 와 complete
이 세 가지 방법 은 우리 가 자주 사용 하 는 ajax 문법 사탕 이다.

$.ajax(/*...*/)
.success(function(){/*...*/})
.error(function(){/*...*/})
.complete(function(){/*...*/})

때로는 내부 에서 속성 으로 처리 하 는 것 을 비교적 좋아한다.
각각 ajax 요청 성공,실패,종료 의 반전 을 표시 합 니 다.이 세 가지 방법 은 Deferred 와 어떤 관계 입 니까?사실은 문법 설탕,success 대응 done,error 대응 fail,complete 대응 always 입 니 다.이렇게 ajax 의 매개 변수 이름 과 일치 하기 위해 서 입 니 다.
요약:
$.Deferred 는 Promise 규범 을 실 현 했 습 니 다.then,done,fail,always 는 Deferred 대상 의 방법 입 니 다.$.when 은 여러 개의 비동기 작업 을 병행 하 는 전역 적 인 방법 으로 ES6 의 all 과 하나의 기능 입 니 다.ajax 는 제 한 된 Deferred 대상 을 되 돌려 줍 니 다.success,error,complete 는 ajax 가 제공 하 는 문법 사탕 입 니 다.기능 은 Deferred 대상 의 done,fail,always 와 일치 합 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.