Javascript Async Generator function

The unique feature of async generator functions in javascript is their support to both await and yield. It returns an async iterator rather than a promise or iterator.

The async generator functions are distinct from async functions and the generator functions in javascript. The next() function of an async iterator always returns a promise.

The only difference between an async generator and a conventional generator is that an async generator's next() method returns a Promise. The "for await..." of the statement is used to iterate over an async generator.

Syntax

The following syntax shows an async generator in the JavaScript function.

async function* function_name () {
...
}

Examples

The following examples use the different methods and functions in javascript.

Example 1

In this example, you use the throw keyword to an error using an error object. It will include a user-supplied error message, and then we will use a catch statement to correct the error.

<!DOCTYPE html>
<html>
<head>
<title> An async generator in the JavaScript function </title>
</head>
<body>
<h3> An async generator in the JavaScript function </h3>
<b> Please See the Console Tab. </b>
<script>
console.log("Javascript async generator");
async function* generator_function() {
throw new Error("Error thrown in the "
+ " Jaavascript async generator function....!!!");
}
let iterator_var = generator_function();
iterator_var
.next()
.then((results) => console.log(results.value))
.catch((errors) => console.log(errors.message));
</script>
</body>
</html>

Output

The image shows the javascript async generator's operation and its output.

Example 2

In this example, we will pair the async generator with the yield keyword. Using a catch statement, we will first declare a promise that is denied and which has the error statement in the reject() method.

<!DOCTYPE html>
<html>
<head>
<title> An async generator in the JavaScript function </title>
</head>
<body>
<h3> An async generator in the JavaScript function </h3>
<b> Please See the Console Tab. </b>
<script>
console.log("Javascript async generator ");
async function* generator_fun() {
yield new Promise((resolve, reject) => {
reject("Result thrown in the "
+ " Jaavascript async generator function using yeild method....!!!");
});
}
let iterator_var = generator_fun();
iterator_var
.next()
.then((result) => console.log(result.value))
.catch((error) => console.log(error));
</script>
</body>
</html>

Output

The image shows the javascript async generator's operation and its output.

Example 3

In this example, the async generator function displays the use of the yield and await keywords.

<!DOCTYPE html>
<html>
<head>
<title> An async generator in the JavaScript function </title>
</head>
<body>
<h3> An async generator in the JavaScript function </h3>
<b> Please See the Console Tab. </b>
<script>
console.log("Javascript async generator");
'use strict';
async function* function_data() {
await new Promise(resolve => setTimeout(resolve, 100));
yield 'Hello Student';
console.log('Wecome to Development World');
}
const asyncfunction_data = function_data();
(async () => {
for await (const values of asyncfunction_data) {
console.log(values); // print the input value
}
})();
</script>
</body>
</html>

Output

The image shows JavaScript async generator's operation and its output.

Example 4

The example shows the iterator value using the operator and function. The iterator shows data from start to end values of the async generator function.

<!DOCTYPE html>
<html>
<head>
<title> An async generator in the JavaScript function </title>
</head>
<body>
<h3> An async generator in the JavaScript function </h3>
<b> Please See the Console Tab. </b>
<script>
console.log("Javascript async generator");
async function* asyncFunction(start, end) {
for (let y = start; y <= end; y++) {
yield new Promise((resolve, reject) => {
setTimeout(() => {
resolve(y);
}, 100);
});
}
}
(async () => {
let sequence_var = asyncFunction(2, 5);
for await (let num_value of sequence_var) {
console.log(num_value);
}
})();
</script>
</body>
</html>

Output

The image shows JavaScript async generator's operation and its output.

Conclusion

The JavaScript async generator uses to operate multiple data. It is used in the promise, iterator, and other methods to manage complicated functionality in a simple way.

Next TopicJavascript "for...of" loop

← prev next →