DEFERRER
jQuery Deferred๋ ๊ฐ๊ฐ์ ๋น๋๊ธฐ์ ์ฒ๋ฆฌ์ Promise ๊ฐ์ฒด๋ฅผ ์ฐ๊ณํ์ฌ ๊ทธ ์ํ๋ฅผ ์ ํํ๋ ๊ฒ์ด๋ค. ์ฆ, promise๋ฅผ ๊ตฌํํ jQuery ๊ฐ์ฒด์ด๋ค.
jQuery Deferred์์ ๊ฐ๊ฐ์ ๋น๋๊ธฐ ์ฒ๋ฆฌ๋ฅผ Deferred๊ฐ์ฒด๋ก wrappingํ๋ค. Deferred ๊ฐ์ฒด๋ ์ํ๋ฅผ ๊ฐ์ง๊ณ ์์ผ๋ฉฐ, ์ด๋ ๋น๋๊ธฐ์ ์ฒ๋ฆฌ์ ์ํ๊ฐ ๋ณ๊ฒฝ๋๋ ์์ ์ ํน์ ํจ์(resolve()
, reject()
)๋ฅผ ํธ์ถํ์ฌ Deferred ๊ฐ์ฒด์ ์ํ๋ฅผ ๋ถ์ฌํ๋ค.
์ผ๋ฐ์ ์ธ ์ฒ๋ฆฌ ์์๋ ๋ค์๊ณผ ๊ฐ๋ค.
$.Deferred()
๋ก Deferred๊ฐ์ฒด ์์ฑ๋น๋๊ธฐ ์ฒ๋ฆฌ๊ฐ ์ข ๋ฃ๋๋ฉด Deferred ๊ฐ์ฒด์
resolve()
orreject()
๋ก Deferred ๊ฐ์ฒด์ state๋ณ๊ฒฝpromise()
๋ก Deferred ๊ฐ์ฒด๊ฐ ๊ฐ์ง๊ณ ์๋ Promise ๊ฐ์ฒด๋ฅผ ๋ฐํํ๋ค. ๋ฐํ๋ ๊ฐ์ฒด๋ Deferred ๊ฐ์ฒด์resolve()
orreject()
๋ฅผ ๋ ์ด์ ์ฌ์ฉํ ์ ์๊ฒ๋์ด ๋น๋๊ธฐ ์ฒ๋ฆฌ ์ํ๋ฅผ ๋ณด์ฅํ ์ ์๊ฒ๋๋ค.

// 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
๋ฅผ ์ฌ์ฉํ๋ฉด ์ข๋ค.
๋ฐ์ดํฐ ์ ๊ทผ : ๋ฐ์ดํฐ ์ ๊ทผ API๋ค์
$.Deferred
๋ก ๊ตฌํํ๋ ๊ฒ์ ๋ณดํต ์ข์ ๋์์ธ์ด๋ค. Deferred API์ธ$.when
๊ณผDeferred.pipe
๋ ๋น๋๊ธฐ ์๋ธ์ฟผ๋ฆฌ๋ค์ ๋๊ธฐํํ๊ณ ์ฒด์ธ์ผ๋ก ์ฐ๊ฒฐํ๋๋ฐ ๋งค์ฐ ๊ฐ๋ ฅํ๋ค.UI ์ ๋๋งค์ด์ :
Deferred
๋ก ์ ๋๋งค์ด์ ํจ์๋ค์ ๊ฐ์ธ๋ ๊ฒ์ ์ฝ๋์ ๋ณต์ก๋๋ฅผ ๊ฐ์์ํค๊ณ ์ ์ฐ์ฑ์ ์ฆ๊ฐ์ํฌ ์ ์๋ค. (์ผ๋ฐ์ ์ธ wrapper ํจ์๋ ํฐ ๋์์ด ๋ ์ ์๋ค.)UI ์ปดํฌ๋ํธ ํ์ : ์ ํ๋ฆฌ์ผ์ด์ ์ด ๋ณ๋์ UI๋ฅผ ๋ณด์ฌ์ค ํ์๊ฐ ์์ ๋, Deferred๋ก ์บก์ํ๋ ์ปดํฌ๋ํธ๋ค์ ๋ผ์ดํ ์ฌ์ดํด์ ๊ฐ์ง๋ ๊ฒ์ ํ์ด๋ฐ์ ๋ ์ ์กฐ์ ํ ์ ์๊ฒ ๋๋ค.
๋ธ๋ผ์ฐ์ ๋น๋๊ธฐ API : ์ผ๋ฐํ ๋ชฉ์ ์ผ๋ก ๋ธ๋ผ์ฐ์ API ํธ์ถ์ Deferred๋ก ๊ฐ์ธ๋ ๊ฒ์ ์ข๋ค.
์บ์ฑ
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?