jQuery.Deferred() 메서드

오늘 프로젝트에서 Deferred() 방법을 만났습니다. 프로젝트에서 Dojo를 사용했지만 사실 각 프레임워크는 서로 통하고 이전에 만난 적이 없습니다. 그래서 오늘 인터넷에서 자료를 찾아서 정의와 사용법을 배웠습니다. $.Deferred () 는 체인식 실용 대상 방법으로 여러 개의 리셋을 등록하고 리셋 대기열을 호출하여 동기화나 비동기화 기능이 성공하거나 실패한 상태를 전달하는 구조 함수입니다.
팁:

$.Deferred () 구조 함수로 새 Deferred (지연) 대상을 만듭니다. jQuery.Deferred는 구조 방법이 되돌아오기 전에 새 Deferred 대상을 함수의 첫 번째 인자로 호출하고 전달할 수 있는 선택할 수 있는 함수를 전달합니다.예를 들어 호출된 함수는 deferred를 사용할 수 있습니다.then ()에 콜백 함수를 추가합니다

4

Deferred 객체가 일시 중지 상태로 시작됩니다.모든 사용 deferred.then(), deferred.always(), deferred.done () 또는 deferred.fail () 이 대상에 추가된 리셋 함수는 모두 줄을 서서 실행을 기다립니다.deferred를 호출합니다.resolve () 또는 eferred.resolveWith () 변환이 해결 상태로 지연된 후 설정을 즉시 실행하는doneCallbacks.deferred를 호출합니다.reject() 또는 deferred.rejectWith () 변환이 거부 상태로 지연된 후 설정된failCallbacks를 실행합니다.일단 대상이 해결 또는 거부 상태에 들어갔을 때, 대상은 이 상태를 유지한다.콜백은 해결되거나 거부된 Deferred 객체에 계속 추가할 수 있습니다. 즉시 실행됩니다

구문 $.Deferred( [beforeStart ] )

$.ajax('data/url')
    .done(function(response, statusText, jqXHR){
        console.log(statusText);
    })
    .fail(function(jqXHR, statusText, error){
        console.log(statusText);
    })
    ,always(function(){
        console.log('I will always done.');
    });

1.done,fail,progress는 모두 리셋 목록에 리셋을 추가합니다. jQuery의Deferred 내부에서 $를 사용했기 때문입니다.Callbacks 대상과memory 표시가 추가되었습니다(자세한 내용은 제 글 jQuery 1.9.1 원본 분석 – Callbacks 대상을 보십시오).
그래서 만약에 우리가 처음으로 해당하는 리셋 목록의 리셋을 촉발했다면 리셋 목록에 리셋을 추가하면 리셋 목록에 리셋을 추가하면 바로 리셋 목록을 촉발할 것이다.
즉done,fail,progress 이런 방법을 사용했기 때문에 우리가 수동으로 터치할 필요가 없다.jQuery의ajax는 요청이 완료되면 해당하는 리셋 목록을 터치합니다.그래서 우리 뒤에 있는 체인 조작의 등록 리셋은 리셋 목록을 터치해서 추가되었을 수도 있고, 따라서 바로 실행될 것이다.
2.always 방법은 성공하든 실패하든 이 리셋을 실행한다.
3. then 메서드는 새 Deferred 객체를 반환합니다.
4

then 방법의 매개 변수가 deferred 대상이라면 4

4

이전 체인의 구deferred는 [done | fail | progress] 방법으로 리셋을 등록합니다. 이 리셋의 내용은then 방법에 대응하는 매개 변수 리셋(fnDone, fnFail, fnProgress)을 실행하는 것입니다

4

1) 매개 변수의 리셋이 실행된 후에 되돌아오는 결과가 하나의 프로미스 대상이라면 우리는 이 프로미스 대상에 해당하는 리셋 목록에 리셋을 추가합니다. 이 리셋은then 방법으로 되돌아오는 새로운 프로미스 대상의 성공, 실패, 처리 중인 (done,fail,progress)의 리셋 목록에 있는 모든 리셋을 터치합니다

4

우리가 then 방법에 체인식으로 리셋 작업(done,fail,progress,always,then)을 추가할 때 새 deferred 대상에게 해당하는 리셋 목록에 등록하는 것이다

4

만약에 우리then 매개 변수 fnDoneDefer, fnFailDefer, fnProgressDefer가 해결되면 뒤에 체인식으로 리셋 작업 중의 매개 변수 함수를 추가합니다

2) 매개 변수 리셋이 실행된 후에 되돌아오는 결과returned가promise 대상이 아니라면 새 deferred 대상에 해당하는 리셋 목록의 모든 리셋을 즉시 터치하고 리셋 함수의 매개 변수는 이전의 실행 리셋 결과returned입니다

4

우리가 then 방법에 체인식으로 리셋 작업(done,fail,progress,always,then)을 추가할 때 바로 우리가 추가한 상응하는 리셋을 터치한다

4

여러 개의 then을 연속적으로 사용할 수 있는데 이 기능은 순서대로 비동기 리셋을 호출하는 것과 같다

$.ajax({
	url: 't2.html',
	 dataType: 'html',
	 data: {
	    	d: 4
	 }
}).then(function(){
  	console.log('success');
},function(){
 	 console.log('failed');
}).then(function(){
 	 console.log('second');
	  return $.ajax({
	      url: 'jquery-1.9.1.js',
	      dataType: 'script'
	  });
}, function(){
	  console.log('second f');
	  return $.ajax({
	      url: 'jquery-1.9.1.js',
	      dataType: 'script'
	  });
}).then(function(){
	  console.log('success2');
	},function(){
	  console.log('failed2');
});

위 코드, 만약 첫 번째 대 t2.html의 요청이 성공적으로 success를 출력하면second의ajax 요청을 실행합니다. 이어서 이 요청이 성공했는지 실패했는지에 대해success2 또는failed2를 실행합니다.첫 번째failed를 출력하지 못하고second f의ajax 요청을 실행합니다. (위와 다르다는 것을 주의하십시오.) 이 요청이 성공했는지 실패했는지 success2 또는failed2를 실행합니다.이런 것들을 이해하는 것은 실패 처리에 매우 중요하다.위에서 서열화된 비동기 조작 코드를 then 방법으로 개조한 후 코드는 즉시 편평해지고 가독성도 강화되었다.

var req1 = $.get('api1/data');
    var req2 = $.get('api2/data');
    var req3 = $.get('api3/data');
    req1.then(function(req1Data){
        return req2.done(otherFunc);
    }).then(function(req2Data){
        return req3.done(otherFunc2);
    }).then(function(req3Data){
        doneSomethingWithReq3();
    });

4. 이어서 $를 소개한다.when의 방법은 주로 여러 개의 deferred 대상을 병행화하는 것이다. 모든 deferred 대상이 해결되면 뒤에 추가된 상응하는 리셋을 실행한다.

$.when(
        $.ajax({
            url: 't2.html'
        }),
        $.ajax({
            url: 'jquery-1.9.1-study.js'
        })
    ).then(function(FirstAjaxSuccessCallbackArgs, SecondAjaxSuccessCallbackArgs){
        console.log('success');
    }, function(){
        console.log('failed');
    });

만약 실패하면 모두 실패한 리셋을 실행할 것이다.위의 병렬 작업 코드를 개선하면 다음을 수행할 수 있습니다.

$.when(
         $.get('api1/data'),
         $.get('api2/data'),
         $.get('api3/data'),
         { key: 'value' }
     ).done();