[JQUERY] 어떻게 jQuery를 약속을 사용하여 세 가지 비동기 호출을 체인합니까?

어떻게 jQuery를 약속을 사용하여 세 가지 비동기 호출을 체인합니까?

해결법

1. ---

   1.각각의 경우에, $ 아약스에 의해 반환 된 jqXHR 객체 ()를 호출.

   각각의 경우에, $ 아약스에 의해 반환 된 jqXHR 객체 ()를 호출.

   이러한 개체는 약속 호환 그래서는 그 때는 함께 체인 될 수있다 () /. 수행 () /. 실패 () /. 항상 ().

   그 때는 ()는 정확히 문제로,이 경우 당신이 원하는 하나입니다.

   function first() {
      return $.ajax(...);
   }
   
   function second(data, textStatus, jqXHR) {
      return $.ajax(...);
   }
   
   function third(data, textStatus, jqXHR) {
      return $.ajax(...);
   }
   
   function main() {
       first().then(second).then(third);
   }
   

   인수 데이터는 textStatus 및 jqXHR 즉 이전 함수에서 $의 아약스 () 호출에서 발생한다. 제 () 공급 제 () 및 제 () 공급 제 ().

   데모 ($ .when로 ( '푸') $ 아약스 (대신하는 이행 약속을 제공하기 위해 ...)).

2. ---

   2.jQuery를 함께 약속을 사용할 때 훨씬 쉽게 접근 방식은 실제로 있습니다. 다음에서보세요 :

   jQuery를 함께 약속을 사용할 때 훨씬 쉽게 접근 방식은 실제로 있습니다. 다음에서보세요 :

   $.when(
       $.ajax("/first/call"),
       $.ajax("/second/call"),
       $.ajax("/third/call")
       )
       .done(function(first_call, second_call, third_call){
           //do something
       })
       .fail(function(){
           //handle errors
       });
   

   단순히 $ .when (...) 호출로 모든 통화를 체인과되는 .done (...) 호출에서 반환 값을 처리합니다.

   당신이 원하는 경우 여기에 연습입니다 : http://collaboradev.com/2014/01/27/understanding-javascript-promises-in-jquery/

3. ---

   3.아주 늦게 답장을,하지만 난 대답이 체인에 대한 몇 가지 똑바로 앞으로 코드를 누락 생각합니다. 이벤트를 체인으로 연결하는 JQuery와의 약속을 지원하는 매우 간단하다. 나는 체인에 대해 다음을 사용 :

   아주 늦게 답장을,하지만 난 대답이 체인에 대한 몇 가지 똑바로 앞으로 코드를 누락 생각합니다. 이벤트를 체인으로 연결하는 JQuery와의 약속을 지원하는 매우 간단하다. 나는 체인에 대해 다음을 사용 :

   $.ajax()
   .then(function(){
      return $.ajax() //second ajax call
   })
   .then(function(){
      return $.ajax() //third ajax call
   })
   .done(function(resp){
      //handle final response here
    })
   

   그것은 루프 또는 여러 개의 중첩 된 콜백을 복잡 아니오 간단합니다.

4. ---

   4.그것은보다 훨씬 간단합니다.

   그것은보다 훨씬 간단합니다.

   $ 아약스는 이미 당신은 단순히 쓰기 수, 약속 (이연 객체)을 반환

   function first() {
       return $.ajax(...);
   }
   

5. ---

   5.당신은 더 많은 기능 방식을 쓸 수 있습니다 :

   당신은 더 많은 기능 방식을 쓸 수 있습니다 :

   [function() { return ajax(...)}, function(data) { return ajax(...)}]
   .reduce(function(chain, callback) { 
     if(chain) { 
       return chain.then(function(data) { return callback(data); });
     } else {
       return callback();
     }
   }, null)
   

6. ---

   6.이 작업을 수행하는 가장 좋은 방법은 이것에 대한 재사용 가능한 기능을하는 것입니다. 이것은 심지어 감소하여 코드의 한 라인을 수행 할 수 있습니다 :

   이 작업을 수행하는 가장 좋은 방법은 이것에 대한 재사용 가능한 기능을하는 것입니다. 이것은 심지어 감소하여 코드의 한 라인을 수행 할 수 있습니다 :

   function chainPromises(list) {
       return list.reduce((chain, func) => chain ? chain.then(func) : func(), null);
   }
   

   이 기능은 세 가지 기능처럼, 약속 개체를 반환 콜백의 배열을 받아들입니다.

   사용 예제 :

   chainPromises([first, second, third]).then(function (result) {
       console.log('All done! ', result);
   });
   

   이 방법은 처음의 결과도 자동으로 그래서 기본적으로 무슨 일이이며, 두 번째의 파라미터 될 것입니다 :

   first().then(function(res1) { return second(res1) })
          .then(function(res2) { return third(res2)  })
          .then(function(result) { console.log('All done! ', result) });
   

   당신이 원하는대로 물론 당신은 배열에 많은 기능으로 추가 할 수 있습니다.

7. ---

   7.여기 좋은 찾고 해결책을 발견 : 어떻게의 jQuery에 1.8.x에서 연기 함수의 순서를 체인합니까?

   여기 좋은 찾고 해결책을 발견 : 어떻게의 jQuery에 1.8.x에서 연기 함수의 순서를 체인합니까?

   그리고 여기에 다소 추한 그러나 아마 작업 유사한 접근, 내 자신의 구현입니다. 그것은 반환 약속 개체에«진행 업데이트»각 방법의 결과를 방송한다.

     $.chain = function() {
         var defer = $.Deferred();
         var funcs = arguments;
         var left = funcs.length;
         function next(lastResult) {
             if(left == 0) {
                 defer.resolve();
                 return;
             }
             var func = funcs[funcs.length - left]; // current func
             var prom = func(lastResult).promise(); // for promise will return itself,
                                          // for jquery ojbect will return promise.
             // these handlers will be launched in order we specify them
             prom.always(function() {
                 left--;
             }).done(function(ret) {
                 defer.notify({
                     idx: funcs.length-left,
                     left: left,
                     result: ret,
                     success: true,
                 });
             }).fail(function(ret) {
                 defer.notify({
                     idx: funcs.length-left,
                     left: left,
                     result: ret,
                     success: false,
                 });
             }).always(function(ret) {
                 next(ret);
             });
         }
         next();
         return defer.promise();
     };
   

   어떻게 상황을 위해 그것을 사용하는 방법? 어쩌면 아름답 지,하지만 작동합니다 :

   function first() {
       return ajax(...);
   }
   
   var id;
   
   funciton second() {
       return ajax(id, ...);
   }
   
   function third() {
       return ajax(id, ...);
   }
   
   $.chain(first, second, third).progress(function(p) {
       if(p.func == first)
           id = p.result.identifier;
   }).then(function() {
       alert('everything is done');
   });
   

   또는 당신은 단지 첫 번째 함수에서 해당 id 변수를 할당 할 수 있습니다.

   당신은 단지 이전 함수의 결과를 필요로하는 경우 또는, 당신은이 방법을 사용할 수 있습니다 :

   function first() {
       return ajax(...);
   }
   function second(first_ret) {
       return ajax(first_ret.id, ...);
   }
   function third(second_ret) {
       return ajax(second_ret.something, ...);
   }
   

8. ---

   8.다음은 작업에 나타나고 동적 될 기능의 목록을 할 수 있습니다 :

   다음은 작업에 나타나고 동적 될 기능의 목록을 할 수 있습니다 :

   <제목> 데모 연쇄 동기 호출 <스크립트 SRC = "http://code.jquery.com/jquery-2.2.4.min.js"> <스크립트 유형 = "텍스트 / 자바 스크립트"> 일 함수 (PARMS) { CONSOLE.LOG ( 'FUNC 하나'+ PARMS); 1을 반환; } 두 함수 (PARMS) { CONSOLE.LOG ( 'FUNC 두'+ PARMS); 2를 반환; } 세 가지 기능 (PARMS) { CONSOLE.LOG ( 'FUNC 세'+ PARMS); 3을 반환; } 네 개의 함수 (PARMS) { CONSOLE.LOG ( 'FUNC 네'+ PARMS); 4를 반환; } VAR의 funcs = "하나", "두」, 「세」, 「네 ']; VAR의 rvals = [0]; call_next_func 함수 () { 경우 (funcs.length == 0) { 을 console.log ( '다'); } 다른 { VAR의 funcname에 funcs.shift = (); CONSOLE.LOG (funcname에); rvals.push (윈도우 [funcname에 (rvals)); call_next_func (); } } $ (문서) .ready (함수 ($) { call_next_func (); });

9. ---

   9.체인 JQuery와 아약스 호출에 내가했다 :

   체인 JQuery와 아약스 호출에 내가했다 :

   function A(){
        return $.ajax({
         url: url,
         type: type,
         data: data,
         datatype: datatype,
         success: function(data)
         {
           code here
         }
       });
      }
   
      function B(){
        return $.ajax({
         url: url,
         type: type,
         data: data,
         datatype: datatype,
         success: function(data)
         {
           code here
         }
       });
      }
   
      function C(){
        return $.ajax({
         url: url,
         type: type,
         data: data,
         datatype: datatype,
         success: function(data)
         {
           code here
         }
       });
      }
   
      A().done(function(data){
        B().done(function(data){
           C();
        })
      });
   

10. ---

    10.난 그냥 아약스 호출 체인, 동일한 문제가 있었다. 노력의 몇 일 후, 나는 마침내 $ 아약스했다 ({비동기 : 거짓 ... 무엇 완전히 내가 archieve 싶었던했다. 난 그냥 그 생각을하지 않았다. 그것은 다른 사람을 도울 수 ...

    난 그냥 아약스 호출 체인, 동일한 문제가 있었다. 노력의 몇 일 후, 나는 마침내 $ 아약스했다 ({비동기 : 거짓 ... 무엇 완전히 내가 archieve 싶었던했다. 난 그냥 그 생각을하지 않았다. 그것은 다른 사람을 도울 수 ...

from https://stackoverflow.com/questions/16026942/how-do-i-chain-three-asynchronous-calls-using-jquery-promises by cc-by-sa and MIT license