ECMAScript 6 (a.k.a. ECMAScript 2015 or ES6) brings a number of new features to JavaScript which will make the language a good fit for large applications. One of these features is better support for asynchronous programming using promises and generators. Another is the addition of the Fetch API which aims to replace XMLHttpRequest as the foundation of communication with remote resources.
The Fetch API’s methods return ES6 Promise objects, which can be used in conjunction with generators to form the basis of complex asynchronous operations. This could be anything from a chain of asynchronous operations, where each operation depends on the value returned by the previous one, to an asynchronous call that has to be made repeatedly to a server to get the latest update.
In this article we will see how the Fetch API can be used in conjunction with generators to build asynchronous APIs. The Fetch API is currently supported in Chrome, Opera, Firefox and Android browsers. We have a polyfill available from GitHub for unsupported browsers.
As ever, the code for this article can be found on our GitHub repository and there is a demo of the final technique at the bottom of the article.
Generators for Asynchronous Operations
[author_more]
Tip: If you need a refresher on what generators are and how they work, check out: ECMAScript 2015: Generators and Iterators
So how can we use generators to perform async operations? Well, if we analyze the way generators work we will find the answer.
A generator function implementing an iterator has the following structure:
function *myIterator(){
while(condition){
//calculate next value to return
yield value;
}
}
The yield keyword is responsible for returning a result and halting execution of the iterator function until it is next invoked. It also keeps the state of the function instead of rerunning everything when next you call it, effectively remembering the last place it left off.
We can re-imagine the above function without while loop as follows:
function *myIterator(){
//calculate value 1
yield value1;
//calculate value 2
yield value2;
...
//calculate value n
yield valuen;
}
The behavior of the function will be identical in both of the above cases. The only reason for using the yield keyword is to pause the execution of the function until the next iteration (which in itself seems kind of asynchronous). And as the yield statement can return any value, we can also return Promises and make the function run multiple asynchronous calls.
Using Generators with the Fetch API
Tip: For a refresher on the Fetch API, check out: Introduction to the Fetch API
As mentioned earlier the Fetch API is intended to replace XMLHttpRequest. This new API provides control over every part of an HTTP request and returns a Promise that either resolves or rejects based on the response from the server.
Long Polling
One of the use cases where the Fetch API and generators can be used together is long polling. Long polling is a technique in which a client keeps sending requests to a server until it gets a response. Generators can be used in such a case to keep yielding the responses unless the response contains data.
Continue reading %Asynchronous APIs Using the Fetch API and ES6 Generators%
by Ravi via SitePoint
