[Deferred] jQuery 에서 Promise 와 같이 사용하기

Promise 와 async & await 는 콜백지옥에서 벗어나게 해주며 비동기 작업의 순차적인 동작을 보장한다.

하지만 ie와 같이 구버전의 브라우저를 꼭 지원해야 할 상황이라면 이런 객체 또는 키워드가 지원되지 않기 때문에 사용이 불가능하다.

이때는 jQuery 의 Deferred 객체를 사용하면 Promise 와 같은 형태로 사용이 가능하다.

아래 예제는 Deferred를 사용한 간단한 예제이다.  3개의 비동기 처리를 1초마다 순차적으로 처리해준다.

(function() {
    var dfd = $.Deferred();
    
    setTimeout(function() {
        dfd.resolve('첫번째로 보낸 값')
    }, 1000);
    
    return dfd.promise()
})()
.then(function(data) {
    
    console.log(data);
    
    var dfd = $.Deferred();

    setTimeout(function() {
        dfd.resolve('두번째로 보낸 값')
    }, 1000);
    
    return dfd.promise()
})
.then(function(data) {
    
    console.log(data);
    
    var dfd = $.Deferred();

    setTimeout(function() {
        dfd.resolve('세번째로 보낸 값')
    }, 1000);
    
    return dfd.promise()
})
.then(function(data) {
    console.log(data)
})

결과)

첫번째로 보낸 값  // 1초 후
두번째로 보낸 값  // 1초 후
세번째로 보낸 값  // 1초 후