Imagine that you are doing an asynchronous request in your program and your mission is to fetch some data’s in your server. Your code might look like this. Nothing fancy here we’re fetching a in the server using a method. data getJSON() But there was big a problem in our code. When we send a request to the server we’re blocking the and our page makes unresponsive and we don’t want to experienced that to our users. UI thread Now to the rescue. Javascript callback We rewrite our code that looks like this w/out blocking the . UI thread Now as we rewrite our code you noticed that it becomes messy and also if we add more request to this chaining method we ended up our code makes a or Pyramid of request. callback hell How do we fix this code? Using ES6 s and . Generator function Promises As per Generators is MDN “Generators are functions which can be exited and later re-entered. Their context (variable bindings) will be saved across re-entrances.” Now before diving into our goal, Lets discuss first how Generator Function works. See this Example: A is defined using character at the end of keyword. We use keyword to return a value inside the Generators body, In our case we are returning two value the “ ” and “ ”. So Every time a Generator Function see a yield keyword in their body, It pauses the execution of the function. Generator Function star (*) function yield Hello Generators Hello again Generators If we call the Generator function ; It will create an Iterator object that has a property of and const fooGenerator = foo() next() throw(). We use keyword to execute the yielded values in our Generator body. Every time we call the next method, It pauses the execution of the function and return the first yielded value in our case and it will return an object literal (eg: and . In our example we display the first yielded value using ; if we check the property it set to false because our generator function have one more yielded value if we call again the the same process of execution repeated the done is set to false because our generator see that we have another yielded value inside their body if we call again the method in the third time the done is set to true and the value will be display is became undefined that is because there was no more yielded value in our Generators body. next() const result = fooGenerator.next(); value done) console.log(`Result: ${result.value}`) done const result1 = fooGenerator.next(); next() const result2 = fooGenerator.next(); Now you see the Basic example of Generator Function lets use this with Promise and refactor our code above that makes a callback hell. Now you see that our code became more elegant than the previous one. Using Generator and Promises will lead us a more elegant code and promotes a Separation of Concerns. Hope it Helps! ˆ_ˆ Follow me on twitter https://twitter.com/llaudevc

Fetch

Mozilla

Twitter

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

The hidden Power of JavaScript Generator and Promises

Too Long; Didn't Read

Companies Mentioned

Vince Llauderes

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

The hidden Power of JavaScript Generator and Promises

Too Long; Didn't Read

Companies Mentioned

Vince Llauderes

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES