[JQUERY] 어떻게 완전히 두 개의 비동기 jQuery를 기능을 체인 회피 jQuery를 약속에?

어떻게 완전히 두 개의 비동기 jQuery를 기능을 체인 회피 jQuery를 약속에?

해결법

1. ---

   1.당신은 두 가지 방법 중 하나 채택 할 수있다 ...

   당신은 두 가지 방법 중 하나 채택 할 수있다 ...

   결합 후 변환 :

   var p1 = Promise.resolve($.getJSON(url_1, params_1)); // voila 1!
   var p2 = Promise.resolve($.getJSON(url_2, params_2)); // voila 2!
   var p3 = Promise.all([p1, p2]).then(...);
   

   변환 후 결합 :

   var p1 = $.getJSON(url_1, params_1);
   var p2 = $.getJSON(url_2, params_2);
   var p3 = Promise.resolve($.when(p1, p2)).then(...); // voila 1 and 2!
   

   노골적으로, 두 방식 모두 jQuery를가 해결을 약속 확인할 때, 또는 약속 중 하나가 실패 할 때 거부되는 것을 당신에게 기본 ES6 약속, P3를 제공 할 것입니다.

   그러나, 당신은 아마 두해서 getJSON () 호출의 결과에 관심이 있으며, jQuery를이 점에서 어색. ES6의 약속 하나를 받아 들일 것입니다 반면, jQuery의 jqXHR 약속은, 그들의 성공 및 오류 콜백 여러 매개 변수를 전달; 나머지 것이다 무시. 다행히, 그것은 하나의 객체를 만들기 위해 함께 여러 PARAMS을 번들로 매우 간단합니다. 이는 이전 ES6로 변환 jQuery를에서 수행되어야한다.

   다음과 같이 코드가 확장을 "변환 후 결합"

   var p1 = Promise.resolve($.getJSON(url_1, params_1).then(
       function(data, textStatus, jqXHR) {
           return { data:data, textStatus:textStatus, jqXHR:jqXHR };
       },
       function(jqXHR, textStatus, errorThrown) {
           return { jqXHR:jqXHR, textStatus:textStatus, errorThrown:errorThrown };
       }
   ));
   var p2 = Promise.resolve($.getJSON(url_2, params_2).then(
       function(data, textStatus, jqXHR) {
           return { data:data, textStatus:textStatus, jqXHR:jqXHR };
       },
       function(jqXHR, textStatus, errorThrown) {
           return { errorThrown:errorThrown, textStatus:textStatus, jqXHR:jqXHR };
       }
   ));
   var p3 = Promise.all([p1, p2]).then(
       function(results) {
           // results[0] will be an object with properties .data, .textStatus, .jqXHR 
           // results[1] will be an object with properties .data, .textStatus, .jqXHR 
       },
       function(rejectVal) {
           // rejectVal will be an object with properties .errorThrown, .textStatus, .jqXHR
       }
   );
   

   다음은 결합 된 결과 자체가 배열에 (여전히 jQuery를에) 변환 할 필요가있는 인수 목록으로 (jQuery를에) 나타나는 방식은 약간 까다 롭습니다 "다음 변환 결합".

   var p1 = $.getJSON(url_1, params_1).then(
       function(data, textStatus, jqXHR) { 
           return { data:data, textStatus:textStatus, jqXHR:jqXHR }; 
       },
       function(jqXHR, textStatus, errorThrown) { 
           return { errorThrown:errorThrown, textStatus:textStatus, jqXHR:jqXHR }; 
       }
   );
   var p2 = $.getJSON(url_2, params_2).then(
       function(data, textStatus, jqXHR) { 
           return { data:data, textStatus:textStatus, jqXHR:jqXHR };
       },
       function(jqXHR, textStatus, errorThrown) { 
           return { errorThrown:errorThrown, textStatus:textStatus, jqXHR:jqXHR }; 
       }
   );
   var p3 = Promise.resolve($.when(p1, p2).then(function() {
       return [].slice.call(arguments);// <<< convert arguments list to Array
   })).then(
       function(results) { 
           // results[0] will be an object with properties .data, .textStatus, .jqXHR
           // results[1] will be an object with properties .data, .textStatus, .jqXHR
       },
       function(rejectVal) { 
           // rejectVal will be an object with properties .errorThrown, .textStatus, .jqXHR
       }
   );
   

   DEMO : 해결

   DEMO : 거부

2. ---

   2.자바 스크립트 약속은 상호 운용. 당신이 원하는 그러나 당신은 모든 적절한 libraries1 네이티브 약속은 구현 anywhere3에서 thenables2 동의 할 그들을 혼합 할 수 있습니다. 어떤 외국인이 나타날 경우, 그들은 단지 그것을 Promise.resolve 할 것입니다.

   자바 스크립트 약속은 상호 운용. 당신이 원하는 그러나 당신은 모든 적절한 libraries1 네이티브 약속은 구현 anywhere3에서 thenables2 동의 할 그들을 혼합 할 수 있습니다. 어떤 외국인이 나타날 경우, 그들은 단지 그것을 Promise.resolve 할 것입니다.

   그들은 모두 같은 약속 구현을 사용하고, 그냥 작동하는 것처럼 그래서 일반적으로 당신은 당신의 코드를 작성합니다. 그러나 지금은 모두 그 때는 메서드 호출이 좋아 구현을 사용하고 있는지 확인하려면; 또는 당신은 표준이 아닌 방법이나 기능을 사용하려면? 그리고 아무것도 -이를 위해, 당신은 명시 적으로 모든 직접 메소드를 호출되는 약속을 캐스팅해야합니다.

   몇 가지 예 :

   Promise.all([$.ajax(…), $.ajax(…)]).then(…); // just works!
   

   $.ajax(…) // a jQuery promise
   .then(…)  // so this would be jQuery `then`, which we don't want.
   

   Promise.resolve($.ajax(…)) // explicit cast
   .then(function(data) {     // native `then`
       return $.ajax(…);      //   just works!
   })                         // returns a native promise still
   .catch(…)                  // so we can use its features
   

   1 : 그래, jQuery를 버전 3.0까지 그들 중 하나가 아닙니다 2 :하지만, 모든 jQuery를이 deferreds과 약속은 thenables은 3 : 정말 사방이 Promise.resolve의 약속, 다음, 반환 값을 콜백 기대, Promise.all 인수, ...

from https://stackoverflow.com/questions/31322068/how-to-dodge-jquery-promises-completely-when-chaining-two-async-jquery-functions by cc-by-sa and MIT license