Q: Handling errors while using Async/Await (JavaScript ES8)

This article aims at providing an insight into handling errors while using async-await. In the below example, a  function TestPromise will return a promise.The promise will give an error and get rejected if the value of the variable budget is less than 20000. The promise will always get rejected as we initialize the value of  budget to be 10000. A function calltestAPromise calls the function TestPromise.  

As shown above function calltestAPromise will call TestPromise and handle the promise it returns with .then  and .catch, an error will get caught in the .catch which will handle the rejected case. The above promise will get rejected with an error.   Now change the function calltestAPromise to be an async function which will await for the promise to get resolved or rejected.

Now, the promise returned by TestPromise will get rejected with an error. The error won’t be handled and the promise rejection will be left unhandled. If the promise gets rejected, the code will never reach the console.log. Handling the error on a promise can be achieved by wrapping the block of code inside a try-catch. The rejected error on promise will be caught by the catch.

The catch of try/catch will catch the error of the promise rejection and the error will be handled in…

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 https://truetocode.com/understanding-callbacks-and-callback-hell-in-javascript-asynchronous-behavior-of-javascript-part-1/697/ https://truetocode.com/understanding-promises-in-javascript-asynchronous-behavior-of-javascript-part-2/730/ https://truetocode.com/generator-functions-in-javascript-asynchronous-behavior-of-javascript-part-3/744/ In the previous three articles in this series, we learned about doing asynchronous operations with callbacks, promises, and generator functions. In ES8 or ES2017 , Javascript introduced a new kind of syntax called async/await, which makes it easier to do asynchronous operations. Async/await syntax is actually 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 do not support async/ await. fetch()  and  json() returns promise

Now using async/await

Both will produce output like  the following 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 easier to read and understand. As you can see that async/await helps you to write code in a way that asynchronous code looks and behave a  more like synchronous code. On each await keyword, the function pauses as you can see in the below…

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

For part 1 and part 2 of this series, see the following links https://truetocode.com/understanding-callbacks-and-callback-hell-in-javascript-asynchronous-behavior-of-javascript-part-1/697/ https://truetocode.com/understanding-promises-in-javascript-asynchronous-behavior-of-javascript-part-2/730/   JavaScript version ES6/ES2017, a new kind of function called generator functions was introduced. These special functions help you to manage asynchronous operations with more ease. Generator functions can be paused and then continued. Generator functions are declared with an asterisk (*) and have a yield keyword which yields data. See the following example to see the proper syntax for using Generator functions.

  There is a 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 a yield

Here you can see that the second yield…

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

In the previous article, we learned about using callback for performing asynchronous operations. In ES06/ES2015, Javascript introduced something called Promises which helps you handle  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 can be called a placeholder for future data and  has 3 states PENDING RESOLVED REJECTED Immediately on creation, the state of a Promise is pending. Resolved state means the asynchronous operation is fulfilled. Rejected means that the asynchronous operation is not completed and has some errors. Many Javascript native apis for asynchronous operations support promises since ES06. Prior to that many libraries including JQuery and Bluebird were used to create promises for doing asynchronous operations. Example for promises JavaScript fetch method 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 that returns the 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 a 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 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 timeout 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…

Share this page in social media platforms
Download Formatting took