jQuery — Resolve/Reject Deferred Objects

jQuery is a popular JavaScript for creating dynamic web pages.

In this article, we’ll look at how to using jQuery in our web apps.

deferred.promise()

The deferred.promise() method returns the deferred object’s promise object.

For example, we can use it by writing:

function asyncEvent() {
  const dfd = jQuery.Deferred();
  setTimeout(function() {
    dfd.resolve("hurray");
  }, Math.floor(400 + Math.random() * 2000));

  setTimeout(function() {
    dfd.reject("error");
  }, Math.floor(400 + Math.random() * 2000));

  setTimeout(function working() {
    if (dfd.state() === "pending") {
      dfd.notify("working... ");
      setTimeout(working, 500);
    }
  }, 1);

  return dfd.promise();
}

(async () => {
  try {
    const res = await $.when(asyncEvent())
    cosole.log(res)
  } catch (err) {
    console.log(err);
  }
})()

We have an asyncEvent function that returns a promise from the deferred object in the last line.

It resolves or rejects randomly.

Then in the async function we invoke the promise returned by the asyncEvent function.

deferred.reject()

The deferred.reject() method rejects a deferred object with an argument and calls any failure callbacks.

For example, we can use it by writing:

const deferred = jQuery.Deferred();
deferred.reject('error');

deferred.rejectWith()

The deferred.rejectWith() method rejects a deferred object with the context object and arguments and calls any failure callbacks.

For example, we can write:

const deferred = jQuery.Deferred();
deferred.rejectWith({
    foo: 'bar'
  }, [1])
  .catch(function(err) {
    console.log(this, err);
  })

We call rejectWith with { foo: ‘bar’ } as the this value and [1] as the arguments array.

Then we can get them all in the catch callback.

this is { foo: ‘bar’ } and err is 1.

deferred.resolve()

We can call deferred.resolve() to resolve a deferred object and call any done callbacks with the given arguments.

For example, we can write:

(async () => {
  try {
    const deferred = jQuery.Deferred();
    const res = await deferred.resolve(1)
    console.log(res);
  } catch (error) {
    console.log(error);
  }
})()

We create the deferred object. Then we call deferred.resolve method with the resolved value.

Then we res has the resolved value since we added await before deferred.resolve .

It works because it returns an object with a then method that takes a callback with the resolved value as the parameter.

deferred.resolveWith()

The deferred.resolveWith() lets us resolve a deferred object and call any done callbacks with a context object and arguments.

For example, we can use it by writing:

const deferred = jQuery.Deferred();
deferred.resolveWith({
    foo: 'bar'
  }, [1])
  .then(function(val) {
    console.log(this, val);
  })

We call resolveWith with the this value and an array of arguments.

Then we call then on the returned object with a callback and get the this and val values.

this is { foo: ‘bar’ } and val is 1.

deferred.state()

The deferred.state() method returns the state of the deferred object.

It can return 'pending' , 'resolved' or 'rejected' .

'pending' means the deferred object isn’t completed.

'resolved' means the deferred object is called with deferred.resolve() or deferred.resolveWith().

'rejected' means the deferred object is in a rejected state. Calling deferred.reject() or deferred.rejectedWith() will make it 'rejected' .

For example, we can use it by writing:

const deferred = jQuery.Deferred();
deferred.resolveWith({
    foo: 'bar'
  }, [1])
  .then(function(val) {
    console.log(deferred.state())
  })

Then the console log should log 'resolved' .

Conclusion

We can do many things with the deferred object.