Programing

jQuery 연기 및 약속-.then () vs .done ()

lottogame 2020. 2. 16. 19:15
반응형

jQuery 연기 및 약속-.then () vs .done ()

jQuery 지연 및 약속에 대해 읽었 으며 성공적인 콜백에 .then()& .done()를 사용하는 것의 차이점을 볼 수 없습니다 . 나도 에릭 Hynds는 것을 언급 .done()과 .success()같은 기능에 매핑 그러나 나는 그렇게 추측하고있어 .then()모든 콜백 모든 성공적인 작업의 완료에 호출한다.

누구든지 올바른 사용법을 가르쳐 줄 수 있습니까?

done()연기 된 문제가 해결되면 연결된 콜백이 시작 됩니다. fail()지연된 항목이 거부되면 연결된 콜백이 시작 됩니다.

jQuery 1.8 이전에는 then()구문 설탕이었습니다.

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

1.8부터는 새로운 약속 then()의 별칭 pipe()이며 반환합니다 . 에 대한 자세한 내용 은 여기 를 참조 하십시오pipe() .

success()그리고 error()온에서만 사용할 수 있습니다 jqXHR호출에 의해 반환 된 객체 ajax(). 그들은을위한 간단한 별칭 done()과 fail()각각 :

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

또한 done()단일 콜백으로 제한되지 않으며 비 기능을 필터링합니다 (버전 1.8에는 1.8.1에서 수정해야하는 문자열 관련 버그가 있음).

// 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 );

동일합니다 fail().

반환 결과가 처리되는 방식에도 차이가 있습니다 (체인이라고 함, 통화 체인 을 만드는 done동안 체인하지 않음 then)

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를 반환하면 외부 약속이 내부 약속이 해결 될 때까지 기다립니다.

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
})

.done() 콜백이 하나 뿐이며 성공 콜백입니다.

.then() 성공과 실패 콜백이 모두 있습니다

.fail() 하나의 실패 콜백이 있습니다

그래서 당신이해야 할 일은 당신에게 달려 있습니다 ... 성공했는지 아니면 실패하는지 걱정하십니까?

deferred.done ()

Deferred가 해결 될 때만 호출 할 핸들러를 추가합니다 . 호출 할 콜백을 여러 개 추가 할 수 있습니다.

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);

deferred.then ()

Deferred가 해결, 거부 또는 여전히 진행 중일 때 호출 될 핸들러를 추가합니다 .

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);
}

jQuery의 Deferreds가 Promises의 구현으로 간주되는 한 jQuery3.0이 실제로 스펙을 가져 오려고 시도하는 한 실제로는 매우 중요한 차이가 있습니다.

done / then의 주요 차이점은

  • .done() 항상 자신이 무엇을하든, 무엇을 반환하든 관계없이 항상 같은 약속 / 포장 값을 반환합니다.
  • .then() 항상 새 약속을 반환하며, 전달한 함수에 따라 약속의 내용을 제어 할 책임이 있습니다.

jQuery에서 기본 ES2015 Promises로 변환되는 .done()것은 체인이 "해결"상태 인 경우 값이 함수에 전달된다는 점에서 Promise 체인의 함수 주위에 "탭"구조를 구현하는 것과 비슷합니다. 그러나 그 기능의 결과는 체인 자체에 영향을 미치지 않습니다.

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));

6이 아닌 5를 기록합니다.

.then이 아니라 done 및 doneWrap을 사용하여 로깅을 수행했습니다. console.log 함수는 실제로 아무것도 반환하지 않기 때문입니다. 그리고 아무것도 반환하지 않는 함수를 전달하면 어떻게됩니까?

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

그것은 기록 될 것이다 :

5

찾으시는 주소가 없습니다

어떻게 된 거예요? .then을 사용하고 아무것도 반환하지 않는 함수를 전달했을 때 암시 적 결과는 "정의되지 않음"이었습니다. 물론 다음 정의 된 Promise [undefined]를 다음 then 메소드에 반환하여 undefined를 기록했습니다. 그래서 우리가 시작한 원래 가치는 기본적으로 상실되었습니다.

.then()핵심은 함수 구성의 형태입니다. 각 단계의 결과는 다음 단계에서 함수의 인수로 사용됩니다. .done이 "탭"으로 가장 잘 생각되는 이유입니다.-> 실제로 컴포지션의 일부가 아니며 특정 단계에서 값을 들여다보고 해당 값에서 함수를 실행하지만 실제로는 변경하지 않는 것입니다. 어떤 식 으로든 구성.

이것은 근본적인 차이점이며, 기본 약속에 .done 메서드가 구현되지 않은 좋은 이유가있을 수 있습니다. 우리는 왜 더 .fail 메소드가 없는지 알아낼 필요가 없습니다. 왜냐하면 .fail / .catch는 더 복잡하기 때문입니다 (즉, .fail / .catch는 베어 값을 반환하는 .dach / .then-> 함수의 미러가 아닙니다. "체재"는.

then()항상 어떤 경우에도 호출됩니다. 그러나 매개 변수 전달은 jQuery 버전마다 다릅니다.

jQuery를 1.8 이전에, then()같습니다 done().fail(). 그리고 모든 콜백 함수는 동일한 매개 변수를 공유합니다.

그러나 jQuery 1.8 then()부터는 새로운 약속을 반환하고 값을 반환하면 다음 콜백 함수로 전달됩니다.

다음 예제를 보자.

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

모든 result3. 소요 then()함수는 항상 다음 함수 같은 연기 객체를 전달합니다.

그러나 jQuery 1.8 기준으로 결과는 다음과 같아야합니다.

result = 3
result = 7
result = NaN

첫 번째 then()함수는 새로운 promise를 반환하고 값 7 (이것은 전달할 유일한 매개 변수)이 다음으로 전달 done()되므로 두 번째 done()write result = 7입니다. 두 번째 then()값은 7을 값으로 사용 a하고 두 번째 undefined값은 NaN 매개 변수를 사용하여 새 약속을 반환하고 마지막 은 NaN을 결과로 인쇄합니다.bthen()done()

다른 답변에서 찾기가 매우 어려운 응답에 매우 간단한 정신 매핑이 있습니다.

.done()약속 체인을 종료하여 더 이상 단계를 첨부 할 수있는 것이 없도록합니다. 이것은 아무도 jQuery promise 구현이 처리 할 수없는 예외를 던질 수 있음을 의미합니다. 아무도이를 사용하여 처리 할 수 ​​없기 때문 .fail()입니다.

실제로 약속에 더 많은 단계를 첨부하지 않으려면을 사용해야합니다 .done(). 자세한 내용은 약속을해야하는 이유를 참조하십시오

참고 URL : https://stackoverflow.com/questions/5436327/jquery-deferreds-and-promises-then-vs-done



반응형

'Programing' 카테고리의 다른 글

PHP + curl, HTTP POST 샘플 코드?  (0) 2020.02.17
UTF-8, UTF-16 및 UTF-32  (0) 2020.02.16
인터페이스와 추상 클래스의 차이점을 어떻게 설명해야합니까?  (0) 2020.02.16
int를 문자열로 변환 하시겠습니까?  (0) 2020.02.16
App Transport Security 정책에 보안 연결을 사용해야하므로 리소스를로드 할 수 없습니다  (0) 2020.02.16

'Programing'의 다른글

  • 현재글jQuery 연기 및 약속-.then () vs .done ()

관련글

댓글

티스토리툴바