복붙노트

[JQUERY] jQuery를이 deferreds과 약속 -되는 .done 대) (그 때는 ()

JQUERY

jQuery를이 deferreds과 약속 -되는 .done 대) (그 때는 ()

해결법


  1. 1.지연된가 해결 될 때 완료에 부착 된 콜백 ()가 발사됩니다. 지연된가 거부 될 때 () 실패에 부착 된 콜백은 해고 될 것입니다.

    지연된가 해결 될 때 완료에 부착 된 콜백 ()가 발사됩니다. 지연된가 거부 될 때 () 실패에 부착 된 콜백은 해고 될 것입니다.

    jQuery를 1.8 이전, 다음 () 단지 문법 설탕했다 :

    promise.then( doneCallback, failCallback )
    // was equivalent to
    promise.done( doneCallback ).fail( failCallback )
    

    1.8로, 다음 ()가 파이프에 대한 별칭 () 반환 새로운 약속 () 파이프에 대한 자세한 내용은 여기를 참조하십시오.

    성공 () 및 오류 ()는 아약스 호출에 의해 반환 된 jqXHR 객체 ()에서만 사용할 수 있습니다. 그들은 (완료) 각각) (실패에 대한 간단한 별칭 :

    jqXHR.done === jqXHR.success
    jqXHR.fail === jqXHR.error
    

    또한, () 단일 콜백에 한정되지 않고, (1.8.1에서 해결되어야 버전 1.8 문자열 버그가 존재하지만) 이외의 기능을 수행 걸러 :

    // this will add fn1 to 7 to the deferred's internal callback list
    // (true, 56 and "omg" will be ignored)
    promise.done( fn1, fn2, true, [ fn3, [ fn4, 56, fn5 ], "omg", fn6 ], fn7 );
    

    동일은 실패 간다 ().


  2. 2.반환 결과가 처리되는 방식의 차이도있다 (수행의 호출 체인은하지 않습니다 체인 다음 호출 체인을 생산하면서)

    반환 결과가 처리되는 방식의 차이도있다 (수행의 호출 체인은하지 않습니다 체인 다음 호출 체인을 생산하면서)

    promise.then(function (x) { // Suppose promise returns "abc"
        console.log(x);
        return 123;
    }).then(function (x){
        console.log(x);
    }).then(function (x){
        console.log(x)
    })
    

    다음과 같은 결과가 기록 얻을 것이다 :

    abc
    123
    undefined
    

    동안

    promise.done(function (x) { // Suppose promise returns "abc"
        console.log(x);
        return 123;
    }).done(function (x){
        console.log(x);
    }).done(function (x){
        console.log(x)
    })
    

    다음을 얻을 것이다 :

    abc
    abc
    abc
    

    ---------- 업데이트 :

    BTW. 난 당신이 원자 유형 값 대신 약속을 반환하는 경우, 외부 약속은 내부 약속 결의 할 때까지 대기 한 얘기를 깜빡 했네요 :

    promise.then(function (x) { // Suppose promise returns "abc"
        console.log(x);
        return $http.get('/some/data').then(function (result) {
            console.log(result); // suppose result === "xyz"
            return result;
        });
    }).then(function (result){
        console.log(result); // result === xyz
    }).then(function (und){
        console.log(und) // und === undefined, because of absence of return statement in above then
    })
    

    이 방법으로는 다음과 같은 병렬 또는 순차적으로 비동기 동작을 구성하기 위해 매우 간단해진다 :

    // Parallel http requests
    promise.then(function (x) { // Suppose promise returns "abc"
        console.log(x);
    
        var promise1 = $http.get('/some/data?value=xyz').then(function (result) {
            console.log(result); // suppose result === "xyz"
            return result;
        });
    
        var promise2 = $http.get('/some/data?value=uvm').then(function (result) {
            console.log(result); // suppose result === "uvm"
            return result;
        });
    
        return promise1.then(function (result1) {
            return promise2.then(function (result2) {
               return { result1: result1, result2: result2; }
            });
        });
    }).then(function (result){
        console.log(result); // result === { result1: 'xyz', result2: 'uvm' }
    }).then(function (und){
        console.log(und) // und === undefined, because of absence of return statement in above then
    })
    

    위의 코드 문제 병렬로 두 개의 HTTP 요청에 따라서 그 HTTP 요청을 아래로하여 서버의 부하를 감소 순차적으로 실행되는 동안 요청이 빨리 완료하고

    // Sequential http requests
    promise.then(function (x) { // Suppose promise returns "abc"
        console.log(x);
    
        return $http.get('/some/data?value=xyz').then(function (result1) {
            console.log(result1); // suppose result1 === "xyz"
            return $http.get('/some/data?value=uvm').then(function (result2) {
                console.log(result2); // suppose result2 === "uvm"
                return { result1: result1, result2: result2; };
            });
        });
    }).then(function (result){
        console.log(result); // result === { result1: 'xyz', result2: 'uvm' }
    }).then(function (und){
        console.log(und) // und === undefined, because of absence of return statement in above then
    })
    

  3. 3.되는 .done ()는 하나의 콜백을 가지고 있으며, 그것은 성공 콜백입니다

    되는 .done ()는 하나의 콜백을 가지고 있으며, 그것은 성공 콜백입니다

    그 때는 ()는 성공 및 실패 콜백을 모두 가지고

    .fail ()는 하나의 실패 만 콜백을 갖는다

    그래서 당신이 성공하면 신경 또는 실패하면 않습니다 ... 당신이해야 할 일을 당신에게 달려있다?


  4. 4.핸들러가 해결되는 경우에만 이연 호출 할 추가합니다. 여러 콜백이 호출 할 추가 할 수 있습니다.

    핸들러가 해결되는 경우에만 이연 호출 할 추가합니다. 여러 콜백이 호출 할 추가 할 수 있습니다.

    var url = 'http://jsonplaceholder.typicode.com/posts/1';
    $.ajax(url).done(doneCallback);
    
    function doneCallback(result) {
        console.log('Result 1 ' + result);
    }
    

    또한,이 같은 이상 쓸 수 있습니다

    function ajaxCall() {
        var url = 'http://jsonplaceholder.typicode.com/posts/1';
        return $.ajax(url);
    }
    
    $.when(ajaxCall()).then(doneCallback, failCallback);
    

    아직 진행, 해결 이연 거부하거나 핸들러가 호출 될 추가합니다.

    var url = 'http://jsonplaceholder.typicode.com/posts/1';
    $.ajax(url).then(doneCallback, failCallback);
    
    function doneCallback(result) {
        console.log('Result ' + result);
    }
    
    function failCallback(result) {
        console.log('Result ' + result);
    }
    

  5. 5.꽤 중요한 차이점은 jQuery를 Deferreds이 약속 (및 jQuery를 버전 3.0 실제로 사양으로 그들을 데리고 시도)의 구현으로 의미하는 한, 사실이있다.

    꽤 중요한 차이점은 jQuery를 Deferreds이 약속 (및 jQuery를 버전 3.0 실제로 사양으로 그들을 데리고 시도)의 구현으로 의미하는 한, 사실이있다.

    수행의 주요 차이점은 / 그 다음이다

    네이티브 ES2015 약속에 jQuery를으로부터 번역되는 .done ()는 정렬 체인이 "해결"상태 인 경우는,에 값을 합격으로 약속 체인 함수 주위의 "탭"구조를 구현 등이며 함수 ...하지만 그 함수의 결과는 체인 자체에 영향을 미치지 않습니다.

    const doneWrap = fn => x => { fn(x); return x };
    
    Promise.resolve(5)
           .then(doneWrap( x => x + 1))
           .then(doneWrap(console.log.bind(console)));
    
    $.Deferred().resolve(5)
                .done(x => x + 1)
                .done(console.log.bind(console));
    

    사람들은 모두 5,하지 (6) 기록합니다.

    내가하지 그 때는, 로깅을 수행하기 위해 수행하고 doneWrap 사용합니다. CONSOLE.LOG 기능이 실제로 아무것도 반환하지 않기 때문이다. 그리고 무슨 일이 아무것도 반환하지 않습니다 그 때는 함수를 전달하면 어떻게됩니까?

    Promise.resolve(5)
           .then(doneWrap( x => x + 1))
           .then(console.log.bind(console))
           .then(console.log.bind(console));
    

    즉 기록합니다 :

    어떻게 된 거예요? 내가 그 때는 사용하고 아무것도 반환하지 않았습니다 함수를 통과 할 때의 암시 적 결과는 물론 정의되지 않은 로그인 한 다음 다음 방법 [정의되지] 약속을 반환하는 ... "정의되지 않은"이었다. 우리는 기본적으로 손실 된 시작 원래 값 그래서.

    그 때는 ()는, 중심부에, 함수 조성물의 형태이며, 각 단계의 결과는 다음 단계의 함수의 인수로서 사용된다. > 실제로 구성의 일부가 아니다 몰래 특정 단계에서의 값에 모습 그 값에서 함수를 실행하도록, 뭔가, 실제로 변경하지 않습니다 - 그게되는 .done는 "탭"과 같은 최고의 생각입니다 이유 어떤 방식으로하는 조성물.

    이것은 매우 근본적인 차이이며, 기본 약속이되는 .done 방법은 자신을 구현하지 않아도 왜 아마 좋은 이유가있다. 베어 값을 반환 .catch에> 기능을하지 - 그게 훨씬 더 복잡하게 (즉, .fail /되는 .done / 그 때는의 거울이되지 않습니다 .catch 때문에 우리는 더 .fail 방법이 없습니다 이유에 들어갈 필요가 없습니다 전날 않습니다 그들이 해결 그 때는 전달 그들 같이 거부 "숙박"!)


  6. 6.다음 ()는 항상이 어떤 경우에 호출 될 것을 의미합니다. 그러나 전달하는 매개 변수는 다른 jQuery를 버전 다릅니다.

    다음 ()는 항상이 어떤 경우에 호출 될 것을 의미합니다. 그러나 전달하는 매개 변수는 다른 jQuery를 버전 다릅니다.

    이전 jQuery를 1.8, 다음 () 수행과 일치 한 (). 실패 (). 그리고 콜백 함수 모두 동일한 매개 변수를 공유 할 수 있습니다.

    그러나 jQuery를 1.8로, 다음 () 새로운 약속을 반환하고 값을 반환하는 경우, 그것은 다음 콜백 함수에 전달됩니다.

    하자 다음 예제를 참조하십시오

    var defer = jQuery.Deferred();
    
    defer.done(function(a, b){
                return a + b;
    }).done(function( result ) {
                console.log("result = " + result);
    }).then(function( a, b ) {
                return a + b;
    }).done(function( result ) {
                console.log("result = " + result);
    }).then(function( a, b ) {
                return a + b;
    }).done(function( result ) {
                console.log("result = " + result);
    });
    
    defer.resolve( 3, 4 );
    

    jQuery를 1.8 이전에, 대답은해야한다

    result = 3
    result = 3
    result = 3
    

    모든 결과는 다음 3. 그리고 소요 () 함수는 항상 다음 함수 같은 연기 객체를 전달합니다.

    그러나 jQuery를 1.8로, 결과는해야한다 :

    result = 3
    result = 7
    result = NaN
    

    제 첫 후 () 함수가 반환 새로운 약속, 값 7 (이것이 전달되는 유일한 파라미터이다) (다음 완료를 전달한다)로 인해, 제 완료되도록 () 기록 결과 = 7 후 ()은의 값으로 7을 취하고 (b)의 값이 정의되지 않은 소요 제 그럼 () 파라미터 NaN를 가진 새로운 약속을 반환하고) (마지막 완료 그 결과 NaN이를 출력한다.


  7. 7.다른 답변에서 찾을 조금 힘들었다 응답 매우 간단한 정신 매핑이 있습니다 :

    다른 답변에서 찾을 조금 힘들었다 응답 매우 간단한 정신 매핑이 있습니다 :


  8. 8.쉽게 예상치 못한 동작이 발생할 수 있으며, 이전 답변에서 언급되지 않은 jQuery를 3.0로 또 하나 개의 중요한 차이가있다 :

    쉽게 예상치 못한 동작이 발생할 수 있으며, 이전 답변에서 언급되지 않은 jQuery를 3.0로 또 하나 개의 중요한 차이가있다 :

    다음 코드를 살펴 보자 :

    D하자 = $ .Deferred (); d.done (() => CONSOLE.LOG ( '다음')); () d.resolve; 을 console.log ( '지금'); <스크립트 SRC = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js">

    이 출력됩니다 :

    then
    now
    

    지금, 바로 그 코드에서) (다음 ()에 의해 수행 대체 :

    VAR의 D = $ .Deferred (); d.then (() => CONSOLE.LOG ( '다음')); () d.resolve; 을 console.log ( '지금'); <스크립트 SRC = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js">

    출력은 지금 :

    now
    then
    

    그래서, immediatly 해결 deferreds를 들어, 함수는 () 인수가 (다음에 전달 반면 항상 동기 방식으로 호출됩니다) 호출 비동기입니다 수행에 전달.

    업그레이드 가이드에서 언급 한 바와 같이 모두 콜백은, 동 기적으로 호출되는 이전의 jQuery 버전이 다릅니다 :


  9. 9.이들은) (되는 .done의 단점입니다

    이들은) (되는 .done의 단점입니다

    내가 그 때는이 (oneArgOnly)는 항상 .catch를 필요로 일시적으로 생각 () 예외가 자동으로 무시하지만 더 이상 사실이 아니다됩니다 그래서 다음 unhandledrejection 이벤트 로그는 () (기본값) 콘솔에 예외 그 때는 처리되지 않은. 매우 합리적인! 이유가 전혀 ()되는 .done를 사용하는 것이 남아 있지.

    다음 코드는, 계시한다 :

    BTW,되는 .done ()에서 예외가 제대로 잡힐 수 없습니다 때문에되는 .done ()의 동기 패턴, 오류가 하나 .resolve의 지점에서 발생합니다 () (라이브러리 코드를 수 있습니다!) 또는시. 지연된가 이미 해결되었는지 범인을 첨부 () 호출을 수행.

    을 console.log ( '스크립트의 시작.'); 하자 연기 = $ .Deferred (); // deferred.resolve ( '구속.'); deferred.fail (() => CONSOLE.LOG ( '실패 ()')); deferred.catch (() => CONSOLE.LOG ( '캐치 ()')); deferred.done (() => CONSOLE.LOG () () - 1 일 '); deferred.then (() => CONSOLE.LOG ( '2 후 ()')); deferred.done (() => CONSOLE.LOG () () 3-완료 '); deferred.then (() => {CONSOLE.LOG (4 '- 후 () - 드로'); ') 4-다음 (에서 던진'던져;}); deferred.done (() => CONSOLE.LOG () () (5) - 일 '); deferred.then (() => CONSOLE.LOG (6 '- 후 ()')); deferred.done (() => {을 console.log ( '7-수행 () - 던져'); ') (7 일에서 던진'던져;}); deferred.done (() => CONSOLE.LOG () () 8-완료 '); deferred.then (() => CONSOLE.LOG ( '9 후 ()')); CONSOLE.LOG ( '해결.'); {시도 deferred.resolve ( '솔루션.'); } 캐치 (전자) { 핸들러에서 CONSOLE.LOG (`잡힌 예외 해결의 ()`, 전자); } deferred.done (() => CONSOLE.LOG ('10 할거고 () ')); deferred.then (() => CONSOLE.LOG ('11 - 일 () ')); 을 console.log ( '스크립트의 끝.'); <스크립트 SRC = "https://code.jquery.com/jquery-3.4.1.min.js" 무결성 = "SHA384 - vk5WoKIaW / vJyUAd9n / wmopsmNhiy + L2Z + SBxGYnUkunIxVxAv / UtMOhba / xskxh" crossorigin = "익명" >


  10. 10.되는 .done는 () 추가 단계를 연결할 수있는 다른 있는지 아무것도을하지, 약속 체인을 종료합니다. 아무도 가능한 핸들이 .fail을 사용하지 수 있기 때문에 jQuery를 약속 구현, 처리되지 않은 예외를 던질 수있는이 수단 ().

    되는 .done는 () 추가 단계를 연결할 수있는 다른 있는지 아무것도을하지, 약속 체인을 종료합니다. 아무도 가능한 핸들이 .fail을 사용하지 수 있기 때문에 jQuery를 약속 구현, 처리되지 않은 예외를 던질 수있는이 수단 ().

    당신이 약속에 더 많은 단계를 첨부하지 않을 경우 실제적인 측면에서, 당신이되는 .done를 사용해야합니다 (). 자세한 내용은 약속 할 필요가 이유를 참조하십시오

  11. from https://stackoverflow.com/questions/5436327/jquery-deferreds-and-promises-then-vs-done by cc-by-sa and MIT license