Promise 객체가 비동기 문제를 처리하는 방법을 설명하기 위해 jQuery의 $.Deferred 객체를 예로 들어 보겠습니다._jquery

Promise는 코드의 비동기 동작을 더욱 우아하게 만드는 추상화입니다. Promise는 작업 완료 여부에 관계없이 작업의 결과를 나타냅니다.

일부 최신 브라우저는 이미 Promise/A 표준을 따르는 기본 Promise 객체를 제공합니다. jQuery1.5에서는 $.Deferred(Promise 객체로 변환 가능)가 제공됩니다. 잘 알려진 많은 프레임워크도 Promise 개체를 제공합니다. Promise 객체는 이미 JavaScript에서 매우 중요한 패턴입니다. 비동기 문제를 해결하는 데 있어 Promise 개체가 보여주는 우아함은 바로 JavaScript에 필요한 것입니다. Promise 개체가 비동기 문제를 어떻게 처리하는지 알아보기 위해 jQuery의 $.Deferred 개체를 예로 들어 보겠습니다. $.Deferred 객체에 대해서는 jQuery 공식 홈페이지에서 확인하실 수 있으므로 여기서는 자세히 다루지 않겠습니다.

1. 비동기 작업 캡슐화

먼저 이미지 로딩을 예로 들어 다음 코드를 살펴보겠습니다.

//加载图片函数
var loadImg = function(url){
　　var img = new Image() , deferred = $.Deferred() ;
 img.src = url ;
 img.onload = function(){
  //成功则触发deferred.resolve
　　　　deferred.resolve( this ) ;
 } ;
 img.onerror = function(e){
　　　 //失败则触发deferred.reject
  deferred.reject( e );
 } ;
　　//返回promise对象
 return deferred.promise() ;
} ;
//请求图片
var request = loadImg('http://r2.ykimg.com/0515000054AFFC2D6737B343930AFAD6') ;
//请求成功
request.done(function(img){
　　//code
}) ;
//可以注册多个回调，当请求成功时，会按注册的顺序执行，fail和always也有此性质
request.done(function(img){
　　// code
});
//请求失败
request.fail(function(){
　　// code
}) ;
//请求完毕
request.always(function(){
　　//code
});

위 코드에서는 이미지 로딩 작업을 캡슐화하고 이를 $.Deferred에 위임한 다음 마지막으로 반환 약속을 생성합니다. 이 방법을 사용하는 것은 외부에 노출된 콜백을 사용하는 것보다 더 깔끔하고 명확합니다. 이를 수행하는 또 다른 더 중요한 이유는 약속의 연결입니다.

2. 인연을 약속합니다

Promise를 연결하는 방법을 알아보기 위해 위의 이미지를 로드하는 코드를 예로 들어 보겠습니다.

var request = loadImg('http://b1.hucdn.com/upload/item/1411/13/89613257775992_800x800.jpg') ;
request.done(function(img){
　　//code
}) ;
//request连接别的promise之后返回的promise
var request3 = request.then(function(img){
　　//request执行成功时 连接request1
　　var request1 = loadImg('http://b1.hucdn.com/upload/item/1410/19/29492535741725_800x800.jpg') ;
　　return request1 ;
},function(e){
　　//request执行失败时 连接request2
　　var request2 = loadImg('http://b1.hucdn.com/upload/item/1410/19/29492535741725_800x800.jpg') ;
　　return request2 ;
});
//request执行并且request1或request2成功执行时
request3.done(function(done){
　　//code
}) ;

Promise 개체는 onResolve 및 onReject라는 두 개의 콜백을 허용하는 then 메서드를 제공합니다. 콜백에서 Promise를 반환하면 Promise 간의 연결이 완료될 수 있습니다. 이러한 방식으로 비동기 작업을 순차적으로 실행할 수 있습니다.

동시에 jQuery는 또 다른 연결 방법도 제공합니다. 코드를 참조하세요.

var request = loadImg('http://b1.hucdn.com/upload/item/1412/23/48188827139381_800x800.jpg') ;
var request1 = loadImg('http://b1.hucdn.com/upload/item/1412/06/50258594673502_800x800.jpg') ;
//通过$.when连接promise
var request2 = $.when(request,request1) ;
request2.done(function(img,img){
　　//code
}) ;

jQuery는 n개의 Promise 객체를 매개변수로 받을 수 있는 $.when 함수를 제공합니다. Promise의 실행 결과를 함께 연결합니다. 이 접근 방식을 사용하면 여러 비동기 작업을 병렬로 실행할 수 있습니다.

3. 끝

여기 코드는 이미지 로드를 예로 들어 다른 비동기 작업에도 동일한 접근 방식을 적용할 수 있습니다. 예를 들어 jQuery에서 $.ajax 및 $.fn.animate를 호출하면 promise가 반환됩니다. 노드 측에서는 일부 비동기 작업(데이터베이스 읽기, 파일 읽기 등)도 약속으로 캡슐화될 수 있습니다. 그런 다음 여러 Promise에 병합 작업을 구현하여 직렬 또는 병렬로 실행합니다.

첨부: 지연 객체

Promise 객체를 변환하는 데 사용되는 것 외에도 deferred 자체도 매우 유용한 객체입니다. Promise 개체와 같은 메서드와 속성을 제공하는 것 외에도 알림 기능과 진행률 기능도 있습니다. 이 두 기능은 진행률 표시줄과 폭포 흐름을 구현할 때 매우 유용합니다.

진행률 표시줄을 구현할 때, 진행률 표시줄을 100%로 읽었을 때의 실행 타이밍과 실행 로직을 정의하는 데 Resolve 및 done 함수를 사용할 수 있습니다. 읽는 동안 진행률 표시줄의 시간입니다. 거부 및 실패 기능을 사용하여 진행률 읽기가 실패할 때 트리거 타이밍과 트리거 논리를 정의할 수 있습니다.

워터폴 흐름을 구현할 때 모든 데이터가 페이지에 로드되었을 때 분석 및 완료 기능을 사용하여 트리거 타이밍 및 트리거 로직을 정의할 수 있습니다. 알림 및 진행 함수를 사용하여 트리거 타이밍 및 트리거 시간을 정의할 수 있습니다. 폭포 흐름이 다음 페이지를 읽기 위한 것입니다.