Tutorial Roadmap
- Generator Functions & Iterators?
- Usage in Asynchronous Programming(Api Calling)
Generator Functions & Iterators
A generator function is a function which allows us to control the execution of statements in it. i.e can be stopped mid way and continue from where it left
Yup! We can take out any values out of function at any time using yeild and whats more awesome is we can also pass some values in the function during its execution.
yeild 'Anything' // returns anything and pauses
This control in flow of statements is made possible by Iterators Objects.
To put Iterators in plain english it is
Process of looping over custom objects.
Okay Lets See Above Theory In Action
//Normal JS Function
function myName(){
//Statements
return 'Danish Ali';
return 'Unreachable statement';
}
const Name = myName();
console.log(Name) // Danish Ali
This is a working of normal function in JS, It runs till end following run to completion model.
//This is generator function in work
function* myNameGenerator(){
yeild 'My'
yeild 'Name is'
yeild 'Danish'
return 'Ali'
}
const nameGenerator = myNameGenerator
console.log(nameGenerator) //{[Iterator]}
console.log(nameGenerator.next()) // {value:'My', done: false}
Yes a generator function returns an Iterator (an Object)
Iterator has an next method
next() returns an object
{value: Any, done: true | false}
value is the next value from generator and done tells us if generator function is capable of generating more values. i.e when done is true there are no more values to be generated.
//Continuing previous code...
console.log(nameGenerator.next()) // {value:'Name is', done: false}
console.log(nameGenerator.next()) // {value:'Danish', done: false}
console.log(nameGenerator.next()) // {value:'Ali', done: true}
At return statement the done is set to true, after that generators cannot further generate.
Diagram : Normal Function Vs Generator Function
Usage in Asynchronous Programming(Api Calling)
Redux Saga a Middle Ware For Redux is developed by using the functionality offered by generators to achieve asynchronity.
Example of Generators used in redux saga
function* loginRequest(obj) {
//console.log('loginRequest Generator Function Called');
const response = yield anyRequestFunction(data, 'Url');
//console.log('Login Request Working', response);
if (response.status === 200) {
yield put(loginSuccess(response));
} else if (response.status === 400) {
yield put(loginFaliure(response));
} else {
yield put(loginFaliure(response));
}
}
Here when api is called it pauses and executes in background while the control is transferred to next statement after generator call.
Thanks for reading until end, hope it was useful to you.
Happy Coding :)
Top comments (0)