2017-05-03 1 views
-1

jQuery를 사용하여 Promises가 작동하는 방식을 이해하려고합니다. 을 writting - 나는 예상대로 작동jQuery Deferred/Promises

function test1() { 
     var deferred = $.Deferred() 
     setTimeout(function() { 
      deferred.resolve(1); 
      //deferred.reject(2); 
     }, 2000); 
     return deferred.promise(); 
    } 

    function test2() { 
     var deferred = $.Deferred() 
     setTimeout(function() { 
      deferred.resolve(2); 
      // deferred.reject(2); 
     }, 1000); 
     return deferred.promise(); 
    } 

    function doTest(){ 
     $.when(test1()).then(
      function (a) { 
       console.log('test1 finished', a) 
       return test2(); 
      }, 
      function (a) { 
       console.log('something failed in test1', a) 
      } 
     ).then(
      function (b) { 
       console.log("test2 finished", b); 
      }, 
      function (b) { 
       console.log("something failed in test1", b); 
      } 
     ); 
    }  

:

TEST1 1

TEST2가

이 완료 완료하지만 아래처럼 변경하면 이 내 샌드 박스입니다 :

 function test1() { 
     var deferred = $.Deferred() 
     setTimeout(function() { 
      // deferred.resolve(1); 
      deferred.reject(2); 
     }, 2000); 
     return deferred.promise(); 
    } 

    function test2() { 
     var deferred = $.Deferred() 
     setTimeout(function() { 
      deferred.resolve(2); 
      // deferred.reject(2); 
     }, 1000); 
     return deferred.promise(); 
    } 

는 콘솔에 쓰기 : TEST2 심지어 실행되지 않았기 때문에

뭔가 TEST1이 사실이 아니다 무엇

정의되지 않은 완료

TEST2에 실패했습니다.

"test2 undefined"가 표시되지 않아야한다고 생각합니다.

두 번째로 뭔가 잘못되었다고 생각하지만 무엇을해야할까요?

+0

오류 처리기에서'test2'를 호출해야하거나'test2 finished '-logging 결과 처리기를'test2()'약속에만 설치해야하거나 그렇지 않으면 그 전에 오류를 잡아라. – Bergi

+0

jQuery 1.x/2.x에서 Deferreds/Promises에 대해 배웠고 현재는 다르게 작동하는 3.x를 사용하고있는 것처럼 들립니다. 3.x에서 catch 핸들러 ('.then()'의 두 번째 인수)는 기본적으로 캐치됩니다. - 오류가 발생하거나 재 시도되지 않거나 (결국) 거부되는 경우를 제외하고는 약속 체인이 성공 경로를 계속합니다. . –

답변

0

문제는 실제로 첫 번째 then의 onRejected 함수에 있습니다. 특히, "값을 반환"(정의되지 않음)하기 때문에 체인의 다음 then 처리기는 으로 처리합니다. 약속입니다.

$.when(test1()).then(
     function (a) { 
      console.log('test1 finished', a) 
      return test2(); 
     }, 
     function (a) { 
      console.log('something failed in test1', a) 
      // Your problem is here. 
     } 
    ).then(
     function (b) { 
      console.log("test2 finished", b); 
     }, 
     function (b) { 
      console.log("something failed in test1", b); 
     } 
    ); 

이 어떤 경우에 유용 할 수 있습니다 : 동기 코드와 비교하여

$.when(riskyFunction()).then(
    function (value) { 
    return processValue(value); 
    }, function (error) { 
    console.log(error); 
    return defaultValue;   // This lets you recover... 
    }).then(function (value2) { 
    return processValue2(value2); // so this handler runs regardless of 
            // riskyFunction's return value. 
    }); 

, 이것은 좁은 try 블록 일치

대신

try { 
    a = test1(); 
    b = test2(); 
} catch (e) { 
    console.log('something failed in test1', a) 
} 
console.log("test2 finished", b); // this runs even if test1 or test2 fails, 
            // but in those cases b is undefined! 

을, 당신이 당신의 오류 처리기를 제거해야 끝에 return $.reject(a) 또는 throw a 이상을 입력하여오류 체인을 계속 추적하십시오.핸들러.