DEFERRER

jQuery Deferred๋Š” ๊ฐ๊ฐ์˜ ๋น„๋™๊ธฐ์‹ ์ฒ˜๋ฆฌ์— Promise ๊ฐ์ฒด๋ฅผ ์—ฐ๊ณ„ํ•˜์—ฌ ๊ทธ ์ƒํƒœ๋ฅผ ์ „ํŒŒํ•˜๋Š” ๊ฒƒ์ด๋‹ค. ์ฆ‰, promise๋ฅผ ๊ตฌํ˜„ํ•œ jQuery ๊ฐ์ฒด์ด๋‹ค.

jQuery Deferred์—์„œ ๊ฐ๊ฐ์˜ ๋น„๋™๊ธฐ ์ฒ˜๋ฆฌ๋ฅผ Deferred๊ฐ์ฒด๋กœ wrappingํ•œ๋‹ค. Deferred ๊ฐ์ฒด๋Š” ์ƒํƒœ๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ์œผ๋ฉฐ, ์ด๋Š” ๋น„๋™๊ธฐ์‹ ์ฒ˜๋ฆฌ์˜ ์ƒํƒœ๊ฐ€ ๋ณ€๊ฒฝ๋˜๋Š” ์‹œ์ ์— ํŠน์ • ํ•จ์ˆ˜(resolve(), reject())๋ฅผ ํ˜ธ์ถœํ•˜์—ฌ Deferred ๊ฐ์ฒด์— ์ƒํƒœ๋ฅผ ๋ถ€์—ฌํ•œ๋‹ค.

์„ค๋ช…

pending

์ฒ˜๋ฆฌ์ค‘

resolved

์ฒ˜๋ฆฌ ์„ฑ๊ณต

rejected

์ฒ˜๋ฆฌ ์‹คํŒจ

์ผ๋ฐ˜์ ์ธ ์ฒ˜๋ฆฌ ์ˆœ์„œ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™๋‹ค.

  1. $.Deferred() ๋กœ Deferred๊ฐ์ฒด ์ƒ์„ฑ

  2. ๋น„๋™๊ธฐ ์ฒ˜๋ฆฌ๊ฐ€ ์ข…๋ฃŒ๋˜๋ฉด Deferred ๊ฐ์ฒด์˜ resolve() or reject() ๋กœ Deferred ๊ฐ์ฒด์˜ state๋ณ€๊ฒฝ

    image-20190127210211927

  3. promise()๋กœ Deferred ๊ฐ์ฒด๊ฐ€ ๊ฐ€์ง€๊ณ  ์žˆ๋Š” Promise ๊ฐ์ฒด๋ฅผ ๋ฐ˜ํ™˜ํ•œ๋‹ค. ๋ฐ˜ํ™˜๋œ ๊ฐ์ฒด๋Š” Deferred ๊ฐ์ฒด์˜ resolve() or reject() ๋ฅผ ๋” ์ด์ƒ ์‚ฌ์šฉํ•  ์ˆ˜ ์—†๊ฒŒ๋˜์–ด ๋น„๋™๊ธฐ ์ฒ˜๋ฆฌ ์ƒํƒœ๋ฅผ ๋ณด์žฅํ•  ์ˆ˜ ์žˆ๊ฒŒ๋œ๋‹ค.

image-20190127210328487
// Promise ์„ ์–ธ
var _deferred = function(param){
    var dfd = $.Deferred(); // 1. Deferred ๊ฐ์ฒด ์ƒ์„ฑ

    // ๋น„๋™๊ธฐ์ฒ˜๋ฆฌ
    setTimeout(function(){
        // 2. Deferred๊ฐ์ฒด state๋ณ€๊ฒฝ
        param ? dfd.resolve("resolved") : dfd.reject(new Error("Error"));
    },2000);

    return dfd.promise(); // 3. Promise ๊ฐ์ฒด return
}

//Promise ์‹คํ–‰
_deferred(false)
    .done(function(data){
        // resolve๊ฐ€ ์‹คํ–‰๋œ ๊ฒฝ์šฐ(์„ฑ๊ณต)
        console.log(data);
    })
    .fail(function(error){
        // reject๊ฐ€ ์‹คํ–‰๋œ ๊ฒฝ์šฐ(์‹คํŒจ)
        console.error(error);
    })
    .always(function(){
        console.log('always');
    });

$.when()

์—ฐ์†๋œ ๋ณต์ˆ˜์˜ ๋น„๋™๊ธฐ ์ฒ˜๋ฆฌ๋ฅผ ๋ณ‘๋ ฌ๋กœ ์ฒ˜๋ฆฌํ•  ์ˆ˜ ์žˆ๋‹ค.

$.when($.ajax(url),$.ajax(url2))
    .done(function(result, result2){
        // ..
    })
    .fail(funtion(){
          console.log('rejected');
    });

๋ณ‘๋ ฌ์ฒ˜๋ฆฌ ๋Œ€์ƒ์ธ Promise๊ฐ€ ๋ชจ๋‘ ์„ฑ๊ณตํ•˜๋ฉด $.when() ์€ resolved Promise๋ฅผ ๋ฐ˜ํ™˜ํ•˜๊ณ  ํ•œ๊ฐœ๋ผ๋„ ์‹คํŒจํ•˜๋ฉด rejected Promise๋ฅผ ๋ฐ˜ํ™˜ํ•œ๋‹ค.

$.Deferred ์˜ ์‚ฌ์šฉ

๋‹ค์Œ๊ณผ ๊ฐ™์€ ๊ฒฝ์šฐ์— $.Deferred ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์ข‹๋‹ค.

  1. ๋ฐ์ดํ„ฐ ์ ‘๊ทผ : ๋ฐ์ดํ„ฐ ์ ‘๊ทผ API๋“ค์„ $.Deferred ๋กœ ๊ตฌํ˜„ํ•˜๋Š” ๊ฒƒ์€ ๋ณดํ†ต ์ข‹์€ ๋””์ž์ธ์ด๋‹ค. Deferred API์ธ $.when ๊ณผ Deferred.pipe ๋Š” ๋น„๋™๊ธฐ ์„œ๋ธŒ์ฟผ๋ฆฌ๋“ค์„ ๋™๊ธฐํ™”ํ•˜๊ณ  ์ฒด์ธ์œผ๋กœ ์—ฐ๊ฒฐํ•˜๋Š”๋ฐ ๋งค์šฐ ๊ฐ•๋ ฅํ•˜๋‹ค.

  2. UI ์• ๋‹ˆ๋งค์ด์…˜ : Deferred ๋กœ ์• ๋‹ˆ๋งค์ด์…˜ ํ•จ์ˆ˜๋“ค์„ ๊ฐ์‹ธ๋Š” ๊ฒƒ์€ ์ฝ”๋“œ์˜ ๋ณต์žก๋„๋ฅผ ๊ฐ์†Œ์‹œํ‚ค๊ณ  ์œ ์—ฐ์„ฑ์„ ์ฆ๊ฐ€์‹œํ‚ฌ ์ˆ˜ ์žˆ๋‹ค. (์ผ๋ฐ˜์ ์ธ wrapper ํ•จ์ˆ˜๋„ ํฐ ๋„์›€์ด ๋  ์ˆ˜ ์žˆ๋‹ค.)

  3. UI ์ปดํฌ๋„ŒํŠธ ํ‘œ์‹œ : ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์ด ๋ณ„๋„์˜ UI๋ฅผ ๋ณด์—ฌ์ค„ ํ•„์š”๊ฐ€ ์žˆ์„ ๋•Œ, Deferred๋กœ ์บก์Аํ™”๋œ ์ปดํฌ๋„ŒํŠธ๋“ค์˜ ๋ผ์ดํ”„ ์‚ฌ์ดํด์„ ๊ฐ€์ง€๋Š” ๊ฒƒ์€ ํƒ€์ด๋ฐ์„ ๋” ์ž˜ ์กฐ์ ˆํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋œ๋‹ค.

  4. ๋ธŒ๋ผ์šฐ์ € ๋น„๋™๊ธฐ API : ์ผ๋ฐ˜ํ™” ๋ชฉ์ ์œผ๋กœ ๋ธŒ๋ผ์šฐ์ € API ํ˜ธ์ถœ์„ Deferred๋กœ ๊ฐ์‹ธ๋Š” ๊ฒƒ์€ ์ข‹๋‹ค.

  5. ์บ์‹ฑ

jqXHR

jQuery์˜ ajax ๊ด€๋ จ ํ•จ์ˆ˜๋“ค์€ jQuery XMLHttpRequest(jqXHR) ๊ฐ์ฒด๋ฅผ ๋ฐ˜ํ™˜ํ•˜๋Š”๋ฐ, ์ด ๊ฐ์ฒด๋Š” Deferred ๊ฐ์ฒด์™€ ์œ ์‚ฌํ•˜๊ฒŒ ๋™์ž‘ํ•œ๋‹ค.

var jqxhr = $.ajax('/example')
    .done(function(){
        alert("success");
    })
    .fail(function(){
        alert("fail");
    })
    .always(function(){
        alert("complete");
    });

jqxhr.always(function(){
    alert("second complete");
})

์ฐธ์กฐํŽ˜์ด์ง€

Last updated

Was this helpful?