Asynchronous code is a very important part of JavaScript. We need to write lots of asynchronous code since JavaScript is a single-threaded language. If we run everything line by line, then code that takes longer to run will hold up the program, causing it to freeze.
To write asynchronous code easily, JavaScript has promises which are chainable and can be run in sequence without nesting.
ES2017 introduced the async and await syntax for chaining promises, which makes everything easier. However, there was still no way to run promises sequentially by iterating them in sequence. This means that running lots of promises in a sequence is still a problem that has no solution yet.
Fortunately, in ES2018, we finally have the for-await-of loop that we can use with async functions that were introduced in ES2017. It works with any iterable objects like the synchronous for...of loop. This means that we can iterate through objects like Maps, Sets, NodeLists, and the arguments object with it.
Also, it can iterate through any object with the Symbol.iterator method which returns a generator to let us do the iteration.
for-await-of Loop
We can use the for-await-of loop as follows:
let promises = [];
for (let i = 1; i <= 10; i++) {
promises.push(new Promise((resolve) => {
setTimeout(() => resolve(i), 1000);
}));
}
(async () => {
for await (let p of promises) {
const val = await p;
console.log(val);
}
})();
In the example above, we added 10 promises by defining them in the for loop and then pushing them to the promises array. Then we run the promises one at a time by defining an async function and then use the for-await-of loop to loop through each promise and run them one at a time.
The await in the for-await-of loop will get us the resolved value from the promise and the console.log will log the resolved value.
Like any other async functions, it can only return promises.
The syntax of the for-await-of loop is the same as any other for...of loop. The let p is the variable declaration and promises is the promises array that we’re iterating through.
The code above works like Promise.all , the code is run in parallel, so we see 1 to 10 after 1 second.
Async Iterables
Alternatively, we can define our own asynchronous iterable object if we define an object with the Symbol.asyncIterator method. It’s a special method that returns a generator lets us iterate through it with the for-await-of loop.
For example, we can write:
let asyncIterable = {
[Symbol.asyncIterator]() {
return {
i: 1,
next() {
if (this.i <= 10) {
return new Promise((resolve) => {
setTimeout(() => resolve({
value: this.i++,
done: false
}), 1000);
});
}
return Promise.resolve({
done: true
});
}
};
}
};
(async () => {
for await (let p of asyncIterable) {
const val = await p;
console.log(val);
}
})();
The code above will return a generator which returns a new promise as the for-await-of loop runs.
In the Symbol.asyncIterator method, we have a next function, which is required if we want to make an asynchronous iterable object. Also, we have the i property to keep track of what we iterated through. ‘
In the promise that we return, we have the setTimeout with a callback function that resolves to an object with the value we want to resolve, and the property done . The done property is false if the iterator should keep on returning new values for the for-await-of loop and true otherwise.
Async Generator
We can make the code shorter with the yield keyword to make a generator function to return a generator. Generators are another kind of iterable object which can be used with the for-await-of loop.
For example, we can write:
async function* asyncGenerator() {
for (let i = 1; i <= 10; i++) {
yield i;
}
}
(async () => {
for await (let p of asyncGenerator()) {
const val = await p;
console.log(val);
}
})();
The keyword function* denotes that our function only returns a generator. async means that the generator runs asynchronously. Inside the asyncGenerator function, we have the yield keyword. The yield keyword gets us the next item from the generator as we loop through the generator with the for-await-of loop.
The yield keyword only works with top-level code. It doesn’t work inside callback functions.
If we run the code above, we should get 1 to 10 outputted.
If we write something like:
async function* asyncGenerator() {
for (let i = 1; i <= 10; i++) {
setTimeout(() => {
yield i;
}, 1000);
}
}
We’ll get a SyntaxError .
An object can be made iterable with if we define a Symbol.asyncIterator method which is set to a generator function.
For example, we can write:
(async () => {
const iterableObj = {
[Symbol.asyncIterator]: async function*() {
for (let i = 1; i <= 10; i++) {
yield i;
}
}
}
for await (let val of iterableObj) {
console.log(val);
}
})();
Then we get 1 to 10 logged in the console.log output.
It works like the asyncIterable object we defined above, except that the code is much shorter. Also, we can’t use the yield keyword on callbacks so we’ve to write it like what we have above in that case.
Finally, we can write the following to loop through promises directly:
(async () => {
for await (let i of Array.from({
length: 10
}, ((v, i) => i))) {
const val = await new Promise((resolve) => {
setTimeout(() => resolve(i), 1000)
})
console.log(val);
}
})();
The await keyword actually waits for each promise to resolve until running the next one, so we get each number showing up after 1 second when we run the code.
Asynchronous iteration solves the promise of running many promises sequentially. This feature is available in ES2018 or later with the introduction of the for-await-of loop and asynchronous iterators and generators. With them, we solved the issue of iterating through asynchronous code.
