Async/await in JavaScript : asynchronous behaviour of Javascript Part -4

For part 1,part 2 and part 3 of this series , see the following links In the previous three articles in this series,we learned about doing asynchronous operations with callbacks,promises and generator functions.In ES7 ,Javascript introduces a new kind of syntax called async/await functions which makes it more easier to do asynchronous operations. Async/await syntax is actulally just syntactic sugar over promises and callbacks The following example shows the basic syntax for performing async/await operations.Here too,we use fetch function which returns a promise.Remember that this block of code is run on chrome 60.Earlier versions of chrome does not support async await. the fetch()  and json() returns promise

Now using async/await

The fetch  here returns a promise so we await for fetch .The json() function also returns a promise so we await for that too.Here we can see that using the async/await made the code more easier to read and understand. As you can see that  async/await helps you to write code in a way that  asynchronous code look and behave a  more like synchronous code.On each await keyword, the function pauses as you can see in the below example

  Async/await is just syntactic sugar over promises and Generators.We…

Generator Functions in JavaScript : asynchronous behaviour of Javascript Part -3

For part 1 and part 2 of this series , see the following links   In ES6 version , a new kind of functions called generator functions were introduced.These special functions helps you to manage asynchronous operations with more ease .Generator functions can be paused and then continued.Generator functions are declared with an asterisk (*) and has an yield keyword which yields data. See the following example to see the proper syntax for using a Generator functions.

    You can see the next method in the generator function prototype.To get the value of the first yield we use the next() method.

  Here you can see that the response object has a key value which gives the value of the yield and a done key which represents the status.Here in our example, value will be 1 and done will be false. We have two yields in the generator function .next() gives false two times and a third time gives done as true.If you add a return to the generator function next() will have key done as true.

  Now, if a return is done before an yield

Here you an see that the second yield will…

Understanding Promises in JavaScript : asynchronous behaviour of Javascript Part -2

In the previous article we learned about using callback for processing asynchronous requests.In ES06 Javascript introduced something called Promises which helps you deal with asynchronous operations in a better way The Promise object represents the eventual completion (or failure) of an asynchronous operation, and its resulting value. Promises provide a better way for managing asynchronous operations when compared to traditional callback-based way. Promises represent data that may not be available but will be available later upon completing some asynchronous operation.A promise has 3 states PENDING RESOLVED REJECTED Immediately that state of a Promise is pending.Resolved state means the asynchronous operation is fulfilled.Rejected means that the asynchronous operation was not completed and have some errors. Many Javascript native apis for asynchronous operations support promises since ES06 .Prior to that many libraries including JQuery provided us promises for doing asynchronous operations. Example for promises Javscript fetch operation returns a promise.

You can see that immediately the state of promise is pending.Now for resolving the promise and getting the output Promise.prototype.then() and Promise.prototype.catch() Promise.prototype.then() and Promise.prototype.catch() The promise object has a then method which returns the promise and a catch method which catches the error.See the following set of examples,first on promise…

Understanding Callbacks and Callback hell in JavaScript : asynchronous behaviour of Javascript Part -1

In  most programming languages , functions can accept other function(s) as arguments or return a function .Such functions are called Higher order functions. In JavaScript most APIs and Modules can accept function as an argument to a function .The functions are called  callbacks. Structure of callbacks

Note that JavaScript functions behave as objects.We can set a function as an object property or store a function into a variable. JavaScript is a non-blocking programming language.It doesn’t wait or block  an operation to finish but keeps on  executing.For example consider the case when data is fetched asynchronously,then javascript doesn’t wait for the asynchronous call to get data but  keeps executing the next line of code.So in order to do something with the data we can use callbacks.See the below example in which we use a setimeout to wait for the data just like an XHR request which may take some time to complete

Asynchronous callback with  Jquery and a callback function

  CALLBACK HELL Consider the above example in which we use a callback function which is passed as an argument to the $.get function in Jquery. Now what happens when we want to send subsequent requests is that the code becomes unreadable…

Share this page in social media platforms