jQuery Deferred state() Method

What You’ll Learn

The state() method returns whether a jQuery Deferred is "pending", "resolved", or "rejected". This tutorial covers syntax, five examples, comparisons with isResolved() and isRejected(), and when to inspect state vs use callbacks.

Introduction

Every jQuery Deferred has a lifecycle: it starts pending, then settles exactly once as resolved (success) or rejected (failure). The state() method lets you read that status synchronously — like glancing at a traffic light without changing it.

In jQuery 3.0+, state() is the recommended way to inspect status. It replaces the older boolean helpers isResolved() and isRejected() with one clear string return value.

Understanding the state() Method

state() takes no arguments and returns a string. It does not register callbacks and does not change the Deferred — it only reports the current status at the moment you call it.

A Deferred can never be both resolved and rejected. After settlement, state() always returns the same value for that object.

📝 Syntax

General form of deferred.state:

deferred.state()

Parameters

• None — state() is a read-only inspector.

Return value

• "pending" — the Deferred has not been resolved or rejected yet.
• "resolved" — settlement succeeded via resolve() or resolveWith().
• "rejected" — settlement failed via reject() or rejectWith().

Minimal example

const dfd = $.Deferred();

console.log(dfd.state());  // "pending"

dfd.resolve("OK");
console.log(dfd.state());  // "resolved"

Examples Gallery

Each example shows state() at different points in a Deferred’s lifecycle. Use the Try-it links to run them interactively.

const dfd = $.Deferred();

console.log("before resolve:", dfd.state());  // "pending"

dfd.resolve("Data loaded");

console.log("after resolve:", dfd.state());   // "resolved"

before resolve: pending
after resolve: resolved

const dfd = $.Deferred();

dfd.reject("Network error");

console.log(dfd.state());        // "rejected"
console.log(dfd.isResolved());   // false
console.log(dfd.isRejected());   // true

rejected
false
true

function logStatus(label, dfd) {
  console.log(label);
  console.log("  state():", dfd.state());
  console.log("  isResolved():", dfd.isResolved());
  console.log("  isRejected():", dfd.isRejected());
}

logStatus("resolved dfd", $.Deferred().resolve("ok"));
logStatus("rejected dfd", $.Deferred().reject("err"));

resolved dfd
  state(): resolved
  isResolved(): true
  isRejected(): false
rejected dfd
  state(): rejected
  isResolved(): false
  isRejected(): true

const dfd = $.Deferred();

console.log("start:", dfd.state());  // "pending"

setTimeout(function () {
  dfd.resolve("Loaded");
}, 600);

dfd.always(function () {
  console.log("in always():", dfd.state());  // "resolved"
});

start: pending
in always(): resolved

function statusMessage(dfd) {
  switch (dfd.state()) {
    case "pending":
      return "Loading…";
    case "resolved":
      return "Success!";
    case "rejected":
      return "Something went wrong.";
    default:
      return "Unknown";
  }
}

const loading = $.Deferred();
console.log(statusMessage(loading));  // Loading…

loading.resolve();
console.log(statusMessage(loading));  // Success!

Loading…
Success!

🚀 Use Cases

• Debug logging — print Deferred status during development to trace async flows.
• Unit tests — assert dfd.state() === "resolved" after exercising an API.
• UI status labels — show Loading / Done / Error based on the current string.
• Guard clauses — skip follow-up logic when a Deferred is still "pending".
• Batch inspection — after $.when(), check individual Deferreds in a collection.

📝 Notes

• state() is read-only — it never resolves or rejects the Deferred.
• In jQuery 3.0+, prefer state() over deprecated isResolved() / isRejected().
• "pending" does not mean failure — it means not settled yet.
• For user-facing success/error UI, use done() and fail() rather than polling state().
• jqXHR objects from $.ajax() follow the same pending → resolved/rejected lifecycle.

💡 Best Practices