JAVA SCRIPT - Using Promises for Efficient Asynchronous Processing - Supercoders | Web Development and Design | Tutorial for Java, PHP, HTML, Javascript JAVA SCRIPT - Using Promises for Efficient Asynchronous Processing - Supercoders | Web Development and Design | Tutorial for Java, PHP, HTML, Javascript

Breaking

Post Top Ad

Post Top Ad

Thursday, March 7, 2019

JAVA SCRIPT - Using Promises for Efficient Asynchronous Processing

 Using Promises for Efficient Asynchronous Processing


Problem

You want to have your code do something based on the success or failure of an asyn‐ chronous operation.

Solution 

One option is to use the new native Promise object. A classic use for Promise in a client application is to use it with an Ajax call:


<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="utf-8">
 <title>Promises</title>
 <script>
 var test = new Promise(function(resolve, reject) {
 var req = new XMLHttpRequest();
 req.open('GET', 'http://examples.burningbird.net:8124');
 req.onload = function () {
 if (req.status == 200) {
 resolve(req.response);
 } else {
 reject(req.statusText);
 }
 };
 req.onerror = function() {
 reject("network error");
 };
 req.send();
 });
 test.then(
 function(response) {
 console.log("Response is ", response);
 }, function (error) {
 console.error("Request failed: ", error);
 });
 </script>
 </head>
 <body>
 </body>
</html>


EXPLAIN

he solution, a Promise is created and assigned to a variable. The Promise encapsulates an Ajax call to a server application. Instead of assigning a function name to the XMLHttpRequest’s onload event handler, the function is defined within the Promise, so it has access to the resolve() and reject() functions, passed as parameters to the Promise. 

If the Ajax request is successful, the resolve() Promise function is called; otherwise, the reject() function is called. Once the Promise has been defined, it’s invoked by chaining the Promise’s then() function call to the variable. 

The first parameter to then() is the function that handles a successful event; the second is a function handling an unsuccessful event.


There is no testing for HTTP status or errors. Instead, an ES 6 promise is used with the HTTP request, with a status of 200 resolving the promise, sending the HTTP response to the resolving function, and anything else rejecting the promise, with HTTP status Text sent to the function. The E6 Promise allows us to assign handlers to the two possible states of a pending request: resolved or rejected. 

The Promise, and the contained HTTP request, is invoked with then(), with two parameters: the resolving function, and the rejecting function. In the earlier incarnations of Node, the developers originally intended to use the concept of a promise to provide asynchronous access, rather than the last argument callback that exists today.

 I believe this was a good decision, though many folks disagreed with it. I feel the callback is more intuitively obvious solution, but those that disagree state that the callback concept fails in more complex situations, where nested callbacks cause additional complexity.

The interest in promises persisted and now their implementation is being incorporated into existing and future versions of JavaScript.

No comments:

Post a Comment

Post Top Ad