Promise Pipeline Methods
In this page:
done and fail
done() and fail() register callbacks that jQuery calls automatically once a Deferred resolves successfully or is rejected, letting you react to an asynchronous result without polling or manually checking state. Multiple callbacks can be attached to the same Deferred, and all of them run when it settles.
Example: done and fail
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<script>
const dfd = $.Deferred();
dfd.done(function() { console.log("Resolved"); });
dfd.fail(function() { console.log("Rejected"); });
dfd.resolve();
</script>
</body>
</html>then Method
The then() method can register both a success and a failure handler in one call, and — importantly — it returns a new promise, which lets you chain further processing onto the result of the previous step. This chaining is what makes then() the building block for multi-step asynchronous pipelines.
Example: then Method
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<script>
const dfd = $.Deferred();
dfd.then(function() { console.log("Success handler"); }, function() { console.log("Failure handler"); });
dfd.resolve();
</script>
</body>
</html>always Method
always() runs regardless of whether the Deferred resolves or rejects, making it the natural place for cleanup work like hiding a loading spinner or re-enabling a disabled button, since that needs to happen either way.
Example: always Method
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<script>
const dfd = $.Deferred();
dfd.always(function() { console.log("Cleanup runs either way"); });
dfd.resolve();
</script>
</body>
</html>Pipeline with Async Work
Promise methods can connect multiple asynchronous steps together, where each step's then() handler returns a value — or another promise — that becomes the input to the next step in the chain. This lets you express a sequence of dependent async operations without deeply nesting callbacks inside each other.
Example: Pipeline with Async Work
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<script>
$.Deferred().resolve(5).then(function(n) { return n * 2; }).then(function(n) { console.log("Result:", n); });
</script>
</body>
</html>Small Promise Pipeline Project
A pipeline built this way keeps a sequence of asynchronous steps running in a predictable order, with each step's result flowing cleanly into the next, which is far easier to read and debug than a pyramid of nested callbacks.
Example: Small Promise Pipeline Project
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<script>
function step1() { return $.Deferred().resolve("step1").promise(); }
step1()
.then(function(r) { console.log(r); return "step2"; })
.then(function(r) { console.log(r); });
</script>
</body>
</html>Chapter Quiz — Complete all 5 topics to unlock
0/5 topics done
Complete these topics first: