Frontend/JavaScript

jquery Deferred

findmypiece 2023. 5. 18. 15:11
728x90

정리하면 어떠한 비동기 함수의 후처리에서
이전 함수의 데이터가 필요한 상황이라면 인자로 해당 데이터 또는 미리정의된 함수를 받을 수 밖에 없다.
그런데 후처리는 호출한 쪽의 책임이기 때문에 미리정의된 함수를 전달하는 것이 적절하고
이렇게 인자로 전달받는 후처리함수를 콜백함수라 한다.

그런데 콜백함수로 후처리를 정의하다보면 여러 비동기함수를 연결해서 사용할 경우
행의 길이가 길어지는 것은 불가피하다.
예를 들어 jquery ajax 를 비동기로 호출하는 함수가 5개가 있고
이를 연결해서 사용해야 하는 상황을 가정해보면 될 것 같다.

이를 개선하기 위해 promise 의 jquery 버전인 Deferred 가 사용된다.
후처리를 호출한 쪽에 정의하는 구조로 콜백함수가 필요없다.
호출한 쪽에서 후처리를 하기 위해서는 호출되는 함수와 어쨋든 연결이 되어 있어야 하는데
이 때 promise 가 사용된다.

 

대략 사용법은 아래와 같이 Deferred 를 선언한 뒤에

var deferred = $.Deferred();

 

콜백이 필요한 함수에 콜백함수 대신 위 객체를 파라미터로 넘긴다.

그리고 그 함수에서는 로직의 성공 여부에 따라 deferred 를 아래와 같이 호출한다.

성공: deferred.resolve(result);

실패: deferred.reject();

 

이는 Promise 의 resolve, reject 와 동일한 의미이다.

이렇게 사용된 deferred 는 then 함수 호출을 통해 Promise 처럼 사용할 수도 있고

deferred.promise() 를 통해 또 다시 처리를 뒷단으로 넘길 수도 있다.

728x90