Promise Pipeline मेथड्स
done successful completion handle करता है। fail rejection handle करता है। इन्हें एक promise से attach किया जा सकता है।
In this page:
Syntax
deferred.promise()
.then(doneCallback, failCallback)
.done(callback)
.fail(callback)
.always(callback);done और fail
done() और fail() ऐसे callbacks register करते हैं जिन्हें jQuery automatically तब call करता है जब कोई Deferred successfully resolve हो जाता है या reject हो जाता है।
उदाहरण: done and fail
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
#resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
#output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
</style>
</head>
<body>
<button id="runBtn">Run</button>
<button id="resetBtn">Reset</button>
<div id="output"></div>
<script>
$("#runBtn").click(function() {
$("#output").empty();
const dfd = $.Deferred();
dfd.done(function() { $("#output").append($("<div>").text("Resolved")); });
dfd.fail(function() { $("#output").append($("<div>").text("Rejected")); });
dfd.resolve();
});
$("#resetBtn").click(function() {
$("#output").empty();
});
</script>
</body>
</html>then Method
then() method एक ही call में success और failure दोनों handlers register कर सकता है, और — importantly — यह एक नया promise return करता है, जो आपको chain करने देता है।
उदाहरण: then Method
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
#resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
#output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
</style>
</head>
<body>
<button id="runBtn">Run</button>
<button id="resetBtn">Reset</button>
<div id="output"></div>
<script>
$("#runBtn").click(function() {
$("#output").empty();
const dfd = $.Deferred();
dfd.then(function() { $("#output").append($("<div>").text("Success handler")); }, function() { $("#output").append($("<div>").text("Failure handler")); });
dfd.resolve();
});
$("#resetBtn").click(function() {
$("#output").empty();
});
</script>
</body>
</html>always Method
always() चाहे Deferred resolve हो या reject, बहरहाल चलता है, जो loading spinner छुपाने या फिर से enable करने जैसे cleanup work के लिए natural जगह बनाता है।
उदाहरण: always Method
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
#resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
#output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
</style>
</head>
<body>
<button id="runBtn">Run</button>
<button id="resetBtn">Reset</button>
<div id="output"></div>
<script>
$("#runBtn").click(function() {
const dfd = $.Deferred();
dfd.always(function() { $("#output").text("Cleanup runs either way"); });
dfd.resolve();
});
$("#resetBtn").click(function() {
$("#output").empty();
});
</script>
</body>
</html>Async Work के साथ Pipeline
Promise methods कई asynchronous steps को साथ जोड़ सकते हैं, जहाँ हर step का then() handler एक value — या दूसरा promise — return करता है जो अगला step बनता है।
उदाहरण: Pipeline with Async Work
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
#resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
#output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
</style>
</head>
<body>
<button id="runBtn">Run</button>
<button id="resetBtn">Reset</button>
<div id="output"></div>
<script>
$("#runBtn").click(function() {
$.Deferred().resolve(5).then(function(n) { return n * 2; }).then(function(n) { $("#output").text("Result: " + n); });
});
$("#resetBtn").click(function() {
$("#output").empty();
});
</script>
</body>
</html>एक छोटा Promise Pipeline Project
इस तरह बनाई गई एक pipeline asynchronous steps की एक sequence को predictable order में चलती रखती है, हर step का result अगले में cleanly flow करते हुए।
उदाहरण: Small Promise Pipeline Project
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
#resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
#output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
</style>
</head>
<body>
<button id="runBtn">Run</button>
<button id="resetBtn">Reset</button>
<div id="output"></div>
<script>
$("#runBtn").click(function() {
$("#output").empty();
function step1() { return $.Deferred().resolve("step1").promise(); }
step1()
.then(function(r) { $("#output").append($("<div>").text(String(r))); return "step2"; })
.then(function(r) { $("#output").append($("<div>").text(String(r))); });
});
$("#resetBtn").click(function() {
$("#output").empty();
});
</script>
</body>
</html>Related Topics
{# common_mistakes/chapter_summary/browser_support: on Hindi pages the
view already swaps in the hi_ translation fields (or blanks these
out if untranslated), so this renders correctly for both languages
without a lang_code check here. #}
आम गलतियां
- यह उम्मीद करना कि
.done()chain में नीचे pass की गई value बदल देगा, जबकि सिर्फ.then()अगले step के लिए एक नई value या promise return कर सकता है। - सिर्फ
.done()add करना और.fail()या.always()भूल जाना, ताकि rejected tasks silently ignore हो जाएँ। - यह मान लेना कि
.then()jQuery 3 से पहले exactly native Promise जैसा behave करता है, जबकि पुराने versions thrown errors को उसी तरह catch नहीं करते थे।
🔒
Chapter Quiz — Complete all 5 topics to unlock
0/5 topics done
Complete these topics first: