- Jquery “promise()” method provides better way for handling asynchronous method.
- In JavaScript there are two types of methods, synchronous and asynchronous method.
- PROBLEM DOMAIN:
“Asynchronous method generally has some callback like success, error or complete.There are many situation while coding in java script where we need to call a block of code after an asynchronous method finished execution.
This is where we see the problem as:-
–Browser does not wait for asynchronous method to complete and start executing the next line.
–If We will write the block of code after success method then it create a messy code base to manage.”
- For the above problem Jquery provides a solution by creating a defered object using promise() method.
- In this Demo, “We will see 2 examples, The First example is using promise object for fade out and Second example is using promise object for asynchronous AJAX call”.
- Below code shows a list of names get fade out using asynchronous fadeOut() method and it got checked by done() method from the promise object.When It completes fade out effect, the promise done handler got called which makes this list fade In.
<!DOCTYPE html>
<html>
<head>
<title>Jquery Effect Promise Demo</title>
<script src="jquery.js"></script>
</head>
<body>
<ul class="name-container">
<li>Sandeep</li>
<li>Surabhi</li>
<li>Sangeeta</li>
<li>Sumanta</li>
<li>Surendra</li>
<li>Bapi</li>
</ul>
<script>
$(document).ready(function(){
/*promise method is used for fadeout asynchronous callback*/
$('.name-container li').fadeOut(2000).promise().done(function(){
$('.name-container li').fadeIn(3000);
})
})
</script>
</body>
</html>
- Output of the above code will look like below in browser,
- Below JSON data is used for the demo.
{
"countries":["India","US","UK","France","Italy","Germany","Japan","China","Singapore"]}
- Below Code has a AJAX request for country list and returns a defered promise object to the method and when response came it got checked by using done() method and displays the result in the browser.
<!DOCTYPE html>
<html>
<head>
<title>Jquery AJAX Promise Demo</title>
<script src="jquery.js"></script>
</head>
<body>
<ul class="country-container">
</ul>
<script>
var STUDENT_SCRIPT={
/*Returns Promise Object For Student JSON List For Asynchronous AJAX call*/
getStudentDataPromise:function(){
var ajaxRequest = $.ajax({
type: "POST",
url: "http://localhost:63342/JqueryPromiseDemo/student.json"
});
return ajaxRequest.promise();
}
}
$(document).ready(function(){
var studentPromise = STUDENT_SCRIPT.getStudentDataPromise(),
html = [];
studentPromise.done(function(data){
$.each(data.countries,function(index,object){
html.push("<li>"+object+"</li>");
})
$('.country-container').append(html.join(""));
});
})
</script>
</body>
</html>
- output of the above code look like below in the browser,
