Promises를 사용하여 jQuery에서 세 개의 비동기 호출을 어떻게 연결하고 한 호출에서 다음 호출로 데이터를 전달할 수 있습니까?

jQuery Promise로 세 개의 비동기 호출 연결

이 질문에서는 세 개의 비동기 HTTP 요청이 있는 시나리오를 탐색합니다. 동기 방식이며 한 호출에서 다음 호출로 데이터를 전달해야 합니다.

초기 접근 방식:

질문에서 언급했듯이 처음 두 가지 기능. 이것은 좋은 시작이었지만 두 가지 기능의 경우만 다루었습니다. 세 가지 기능으로 확장하려면 약간 다른 접근 방식이 필요합니다.

JqXHR 개체 연결:

여러 비동기 호출을 연결하는 핵심은 $에서 반환된 jqXHR 개체를 반환하는 것입니다. .ajax() 각 함수에 있습니다. 이러한 객체는 Promise와 호환되며 .then()/.done()/.fail()/.always()를 사용하여 연결할 수 있습니다.

업데이트된 코드:

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

이 업데이트된 코드에서 first() 함수는 AJAX 호출에서 jqXHR 객체를 반환한 다음 second() 함수에 인수로 전달됩니다. 그러면 second() 함수는 third() 함수에 전달되는 jqXHR 객체를 반환합니다.

함수 간 데이터 전달:

인수 데이터 , textStatus 및 jqXHR은 이전 함수의 $.ajax() 호출에서 발생합니다. 즉, first()는 second()에 피드를 제공하고 second()는 third()에 피드를 제공합니다. 따라서 이러한 인수를 사용하여 한 함수에서 다음 함수로 데이터를 전달할 수 있습니다.

데모:

아래 코드는 jQuery Promise를 사용하여 세 가지 비동기 호출을 연결하는 방법을 보여줍니다. . $.ajax(...) 대신 $.when('foo')을 사용하여 이행된 약속을 전달합니다.

function first() {
   return $.when('foo');
}

function second(data) {
   return $.when('bar' + data);
}

function third(data) {
   return $.when('baz' + data);
}

first().then(second).then(third)
  .done(function(data) {
     console.log(data); // Logs "bazbarfoo"
  });

위 내용은 Promises를 사용하여 jQuery에서 세 개의 비동기 호출을 어떻게 연결하고 한 호출에서 다음 호출로 데이터를 전달할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!