jQuery 약속을 사용하여 3개의 비동기 호출을 연결하려면 어떻게 해야 합니까?

jQuery 약속을 사용하여 3개의 비동기 호출을 연결하려면 어떻게 해야 합니까?

동기화 방식으로 해야 하는 HTTP 통화가 3개 있는데 한 통화에서 다른 통화로 데이터를 전달하려면 어떻게 해야 합니까?

function first()
{
   ajax()
}

function second()
{
   ajax()
}

function third()
{
   ajax()
}


function main()
{
    first().then(second).then(third)
}

저는 두 가지 기능에 대해 연기된 것을 사용하려고 했고 부분적인 해결책을 생각해 냈습니다.3가지 기능을 위한 것으로 확장 가능한가요?

function first() {
    var deferred = $.Deferred();
     $.ajax({

             "success": function (resp)
             {

                 deferred.resolve(resp);
             },

         });
    return deferred.promise();
}

function second(foo) {
     $.ajax({
            "success": function (resp)
            {
            },
            "error": function (resp)
            {
            }
        });
}


first().then(function(foo){second(foo)})

에서 하고 jqXHR 합니다를 된합니다.$.ajax().

는 약속 되므로 와 할 수 ..then()/.done()/.fail()/.always().

.then()이 경우에 원하는 것입니다. 질문에서와 같이 말이죠.

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

data,textStatus그리고.jqXHR$.ajax()이전 함수를 호출합니다. 즉.first()를 주다second()그리고.second()를 주다third().

데모(포함)$.when('foo')에 대신에,합니다를 입니다.$.ajax(...)).

사실 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/

답장이 꽤 늦었지만, 제 생각에는 답이 연쇄화를 위한 간단한 코드가 누락된 것 같습니다.이벤트를 연결하는 것은 jquery의 약속 지원으로 꽤 간단합니다.나는 다음을 체인에 사용합니다.

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

루프나 여러 중첩 콜백에 대한 복잡한 작업 없이 간단합니다.

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

$.ajax)을 (Delered object)다를 할 수

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

가장 좋은 방법은 재사용 가능한 기능을 만드는 것입니다.다를 하여 한 합니다.reduce:

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입니다의 .second, 그래서 기본적으로 일어나는 일은 다음과 같습니다.

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

그리고 물론 원하는 만큼 배열에 기능을 추가할 수도 있습니다.

보다 기능적인 방식으로 작성할 수 있습니다.

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

여기서 보기 좋은 해결책을 찾았습니다.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 변수를 지정할 수 있습니다.first기능.

또는 이전 함수의 결과만 필요한 경우 다음 방법을 사용할 수 있습니다.

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

다음은 작동하는 것으로 보이며 함수 목록을 동적으로 사용할 수 있습니다.

<html>
  <head>
  <title>demo chained synchronous calls</title>
  </head>
  <body>

  <script src="http://code.jquery.com/jquery-2.2.4.min.js"></script>
  <script type="text/javascript">
    function one(parms) {
        console.log('func one ' + parms);
        return 1;
    }

    function two(parms) {
        console.log('func two ' + parms);
        return 2;
    }

    function three(parms) {
        console.log('func three ' + parms);
        return 3;
    }

    function four(parms) {
        console.log('func four ' + parms);
        return 4;
    }

    var funcs = ['one', 'two', 'three', 'four'];
    var rvals = [0];

    function call_next_func() {
        if (funcs.length == 0) {
            console.log('done');
        } else {
            var funcname = funcs.shift();
            console.log(funcname);
            rvals.push(window[funcname](rvals));
            call_next_func();
        }
    }

    $(document).ready(function($){
        call_next_func();
    });
  </script>

  </body>
</html>

jquery ajax 호출을 체인으로 연결하려면 다음을 수행했습니다.

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

언급URL : https://stackoverflow.com/questions/16026942/how-do-i-chain-three-asynchronous-calls-using-jquery-promises