jQuery의 deferred.pipe() 메서드: 연속된 비동기 작업 처리 예제와 설명

jQuery의 deferred.pipe() 메서드는 Deferred 객체의 비동기 작업을 연속적으로 처리하는 데 사용됩니다. 이 메서드를 사용하면 한 Deferred 객체의 결과를 다른 Deferred 객체의 입력으로 전달하여 연속된 비동기 작업을 순차적으로 처리할 수 있습니다. 이제 deferred.pipe() 메서드에 대해 자세히 알아보고 예제를 통해 이해해보겠습니다.

deferred.pipe() 메서드 이해하기

deferred.pipe() 메서드는 한 Deferred 객체의 결과를 다른 Deferred 객체의 입력으로 전달하여 비동기 작업을 연속적으로 처리합니다. 이 메서드를 사용하여 체이닝된 비동기 작업을 효율적으로 구성할 수 있습니다.

구문:

deferred.pipe(doneFilter [, failFilter [, progressFilter]]);

• doneFilter: 성공 시 호출될 함수 또는 Deferred 객체입니다.
• failFilter: 실패 시 호출될 함수 또는 Deferred 객체입니다.
• progressFilter: 진행 상태를 처리할 함수입니다.

이제 몇 가지 예제를 통해 이 메서드의 사용법을 살펴보겠습니다.

예제:

예제 1: 연속된 비동기 작업 처리

function asyncTask1() {
  var deferred = $.Deferred();
  setTimeout(function() {
    deferred.resolve("첫 번째 작업 완료");
  }, 1000);
  return deferred.promise();
}

function asyncTask2(data) {
  var deferred = $.Deferred();
  setTimeout(function() {
    deferred.resolve(data + ", 두 번째 작업 완료");
  }, 1000);
  return deferred.promise();
}

asyncTask1().pipe(asyncTask2).done(function(result) {
  console.log(result); // 첫 번째 작업 완료, 두 번째 작업 완료
});

출력:

// 2초 후
첫 번째 작업 완료, 두 번째 작업 완료

예제 2: 실패 처리 추가

function asyncTask1() {
  var deferred = $.Deferred();
  setTimeout(function() {
    deferred.reject("첫 번째 작업 실패");
  }, 1000);
  return deferred.promise();
}

function asyncTask2(data) {
  var deferred = $.Deferred();
  setTimeout(function() {
    deferred.resolve(data + ", 두 번째 작업 완료");
  }, 1000);
  return deferred.promise();
}

asyncTask1().pipe(null, asyncTask2).fail(function(error) {
  console.log("에러 발생:", error); // 에러 발생: 첫 번째 작업 실패
});

출력:

// 1초 후
에러 발생: 첫 번째 작업 실패

예제 3: 진행 상태 처리 추가

function asyncTask1() {
  var deferred = $.Deferred();
  setTimeout(function() {
    deferred.resolve("첫 번째 작업 완료");
  }, 1000);
  return deferred.promise();
}

function asyncTask2(data) {
  var deferred = $.Deferred();
  setTimeout(function() {
    deferred.resolve(data + ", 두 번째 작업 완료");
  }, 1000);
  return deferred.promise();
}

asyncTask1().pipe(asyncTask2).progress(function(progress) {
  console.log("진행 중:", progress); // 진행 중: 첫 번째 작업 완료
}).done(function(result) {
  console.log(result); // 첫 번째 작업 완료, 두 번째 작업 완료
});

출력:

// 1초 후
진행 중: 첫 번째 작업 완료
// 2초 후
첫 번째 작업 완료, 두 번째 작업 완료

deferred.pipe() 메서드를 사용하면 한 Deferred 객체의 결과를 다른 Deferred 객체의 입력으로 전달하여 연속된 비동기 작업을 효율적으로 처리할 수 있습니다. 이를 통해 비동기 작업을 체이닝하여 구성할 때 유용하게 활용할 수 있습니다.