How to use Deferred promise and then in Rest API in SharePoint Online or SharePoint 2013?

How to use Deferred promise and then in Rest API in SharePoint Online or SharePoint 2013?

In this post, we will discuss how to use deferred promise and then in Rest API in SharePoint Online or SharePoint 2013 to make a synchronous call.


We can use Deferred promise and then in Rest API in SharePoint 2013 to make calls. Let us consider an example and then we will see how we can implement this.

Here let us take a list which has three columns:
– Title
– FirstName
– LastName

And let us create an HTML form where the user can enter a title, first name, and last name and click on submit button to save the data in the list and once the data get saved it should display in a div. So in this situation, we need a synchronous call. Our Save to list code should execute first and once it is complete then our Retrieve list items code should execute which will fetch the data from list and show in a div.

Syntax:

Here we can declare Deferred like below

var deferred = $.Deferred();

And then once method() execute completely method2() will get called.

method1().then(function(data) {

method2();

});

});

In the first method (method1()), we have to return promise() like below:

var method1 = function () {

return deferred.promise();

}

Then we can write the success and failure method like below:

function onQuerySucceeded(sender, args) {

deferred.resolve(args);

}

function onQueryFailed() {

deferred.reject(sender, args);

}

Also read:
How to use Deferred and Promise in JavaScript Object Model in SharePoint 2013 to make asynchronous to synchronous call?

Microsoft Flow Example Save tweets that include specific hashtag to a SharePoint list

How to use set field value in Nintex Forms for Office 365 in SharePoint Online?

Full Code:

<div id=”AddListData”>

<div>

Title:

<br />

<input type=”text” id=”txtTitle” />

</div>

<div>

Industry:

<br />

<input type=”text” id=”txtIndustry” />

</div>

<br />

<div>

<input id=”btnSubmit” type=”button” value=”Submit” />

</div>

</div>

<div id=”divResult”></div>

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js”></script>

<script>

var deferred = $.Deferred();

$(function () {

bindButtonClick();

});

function bindButtonClick() {

$(“#btnSubmit”).on(“click”, function () {

addListItem().then(function (data) {

getListData();

});

});

}

var addListItem = function () {

var title = $(“#txtTitle”).val();

var industry = $(“#txtIndustry”).val();

var siteUrl = _spPageContextInfo.webAbsoluteUrl;

var fullUrl = siteUrl + “/_api/web/lists/GetByTitle(‘MyCompanyInfo’)/items”;

$.ajax({

url: fullUrl,

type: “POST”,

data: JSON.stringify({

‘__metadata’: { ‘type’: ‘SP.Data.MyCompanyInfoListItem’ },

‘Title’: title,

‘Industry’: industry

}),

headers: {

“accept”: “application/json;odata=verbose”,

“content-type”: “application/json;odata=verbose”,

“X-RequestDigest”: $(“#__REQUESTDIGEST”).val()

},

success: onQuerySucceeded,

error: onQueryFailed

});

return deferred.promise();

}

function onQuerySucceeded(sender, args) {

deferred.resolve(args);

}

function onQueryFailed() {

deferred.reject(sender, args);

}

function getListData() {

var fullUrl = _spPageContextInfo.webAbsoluteUrl + “/_api/web/lists/getByTitle(‘MyCompanyInfo’)/items”;

$.ajax({

url: fullUrl,

type: “GET”,

headers: {

“accept”: “application/json;odata=verbose”,

“content-type”: “application/json;odata=verbose”,

},

success: onQuerySucceeded1,

error: onQueryFailed1

});

}

function onQuerySucceeded1(data) {

var listItemInfo = ”;

$.each(data.d.results, function (key, value) {

listItemInfo += ‘<b>Title:</b> ‘ + value.Title + ‘ – <b>Industry:</b> ‘ + value.Industry + ‘<br />’;

});

$(“#divResult”).html(listItemInfo);

}

function onQueryFailed1() {

alert(‘Error!’);

}

</script>

Once you save the code, the form will appear like below. User can enter value and click on submit, it will first save the data and then display the result.

How to use Deferred promise and then in Rest API in SharePoint Online or SharePoint 2013?
How to use Deferred promise and then in Rest API in SharePoint Online or SharePoint 2013?


Hope this will be helpful.

Check out Best Alternative to InfoPath -> Try Now

You May Also like the Following SharePoint Online Tutorials:

About Bijay Kumar

I am Bijay from Odisha, India. Currently working in my own venture TSInfo Technologies in Bangalore, India. I am Microsoft Office Servers and Services (SharePoint) MVP (5 times). I works in SharePoint 2016/2013/2010, SharePoint Online Office 365 etc. Check out My MVP Profile.. I also run popular SharePoint web site SharePointSky.com

View all posts by Bijay Kumar →