SharePoint 2013: Implement Deferred And Promise Object In JavaScript Asynchronous Execute

Introduction

SharePoint 2013 Client Object Model is used to retrieve, update and manage the data in SharePoint 2013 library/List. SharePoint makes an Object model available in several forms but here, we are using Javascript Object Model.

• JavaScript library(JSOM)
• REST/OData endpoints

In this Javascript Object Model, we will use executeQueryAsync() but it will execute/ will not wait for success/ fail to complete. We need to make executeQueryAsync() behave synchronously.

It means the function will wait for async operations, which should be completed and should return some values.

We know that SharePoint JavaScript Client Object Model is asynchronous. However, sometimes we want to process the things in a synchronous way.

This can be done by using JavaScript callbacks and deferred/Promises. Let's first see an asynchronous example, which we will later convert to synchronous:

For this reason, JavaScript is having an option to use deferred/promise method do this operation.

Promise

The promises pattern significantly simplifies JavaScript code when you make an app, which must have multiple, nested asynchronous calls and it makes it very powerful.

Example

Your JavaScript code has to update multiple list items one by one to complete the basic operations and wait for the first one to execute.

However, Promise object also acts like a caching mechanism, where the success or failure function will be called immediately, if the Promise has already been fulfilled.

Promises object can make it easy to execute dependent asynchronous calls sequentially, which are based on the results.

Syntax

The deferred/ Promise object is very simple syntax and powerful method for sequentially updating in the list/ list items.

Initially, we need to declare the deferred object, as shown below.

var deferred = $.Deferred();

At the end of the function, we have to return Promise object.

return deferred.promise();

First, we will see about normal JavaScript execution. 

<script type="text/javascript">
    var 0camlItems;
    $(document).ready(function () {
        //don't exectute any jsom until sp.js file has loaded.
        SP.SOD.executeFunc('sp.js', 'SP.ClientContext', getvalues);
    });

    function getvalues() {
        retrivethelistitem('Tutorial list');
        console.log(“Execute  second after the retrieve list items ”);
    }

    function retrivethelistitem(listTitle) {
        var clientContext = new SP.ClientContext.get_current();
        var olist = clientContext.get_web().get_lists().getByTitle(listTitle);
        var camlQuery = new SP.CamlQuery();
        ocamlItems = olist.getItems(camlQuery);
        clientContext.load(ocamlItems);
        clientContext.executeQueryAsync(
            Function.createDelegate(this, this.success),
            Function.createDelegate(this, this.failure)
        );
    };

    function success(sender, args) {
        var listItemEnumerator = ocamlItems.getEnumerator();
        while (listItemEnumerator.moveNext()) {
            var olistItem = listItemEnumerator.get_current();
console.log(‘execute first ‘);

console.log(olistItem.get_item('Title'));
        }
    }

    function onQueryFailed(sender, args) {
        console.log('An error occured while retrieving list items:' + args.get_message());
    }
</script>

Output

For the method given above, we will get the output given below.

Execute second after retrieving the list items.

execute first
NewListitem

Here, we are expecting success function, which should execute first. Unfortunately, the previous one executed. Sometimes it will cause a major issue when you are updating the list items.

Thus, we need to use Async operation to perform synchronously.

Let's see the deferred/ Promise function, as shown below. 

<script type="text/javascript">
    var 0camlItems;
    $(document).ready(function () {
        //don't exectute any jsom until sp.js file has loaded.
        SP.SOD.executeFunc('sp.js', 'SP.ClientContext', getvalues);
    });

    function getvalues() {
        retrivethelistitem('Tutorial list').done(function()
{
        console.log(“Execute  second after the retrieve list items ”);
}).fail(function()
{
 console.log(“Execute  second after the retrieve list items  failed”);
});
    }

    function retrivethelistitem(listTitle) {
//Declare your deferred object here
      var deferred=$.Deferred();
        var clientContext = new SP.ClientContext.get_current();
        var olist = clientContext.get_web().get_lists().getByTitle(listTitle);
        var camlQuery = new SP.CamlQuery();
        ocamlItems = olist.getItems(camlQuery);
        clientContext.load(ocamlItems);
        clientContext.executeQueryAsync(
            Function.createDelegate(this, this.success),
            Function.createDelegate(this, this.failure)
        );
//Return your Promise Object
return deferred.promise();
    };

    function success(sender, args) {
        var listItemEnumerator = ocamlItems.getEnumerator();
        while (listItemEnumerator.moveNext()) {
            var olistItem = listItemEnumerator.get_current();
console.log(‘execute first ‘);

console.log(olistItem.get_item('Title'));
//Resolve your object here
deferred.resolve(olistItem );
        }
    }

    function onQueryFailed(sender, args) {
        console.log('An error occured while retrieving list items:' + args.get_message());
//Reject your object here
deferred.reject(olistItem );
    }
</script>

Output

For the code given above, we will get the output, as shown below.

execute first
NewListitem

Execute second after retrieving the list items.