Multiple return values from multiple promises

Category: Back-end, Front-end 2020-03-11 Łukasz Nojek

Let’s assume we want to retrieve some data from an API and show it together with the original data. For instance, I’ll use the DuckDuckGo API to find capital names for countries.

Table of contents

One country
Multiple countries
Sorted with single Promise
Sorted with parallel calls

One country

If I search for a country, let’s say Peru, many browsers will return brief information about that country, including the capital city. I used DuckDuckGo because it provides that information and has fair API usage.

Let’s start with analyzing the result in a browser by opening the page:

https://api.duckduckgo.com/?q=$Peru&skip_disambig=1&format=json&pretty=1

So we’re searching for Peru, discard the disambiguation information (skip_disambig=1), return the result as a JSON (format=json) and format the result to be readable (pretty=1). The last part won’t be necessary to use in the code (parsing doesn’t need pretty print ;)).

I found that the information about the capital is stored in Infobox => content => (something with label Capital). Therefore in order to get the capital of one country, I can write:

const country = 'Peru';
fetch(`https://api.duckduckgo.com/?q=${country}&skip_disambig=1&format=json`)
	.then(data => data.json())
	.then(json => json.Infobox.content.find(c => c.label === 'Capital').value)
	.then(capital => console.log(`${country} - ${capital}`));

Result:

Peru - Lima

It works well. Notice the problem here: in the final command I need access to both country and capital. (I bet the country can be retrieved from the result as well, but it won’t always be the case).

Multiple countries

Now let’s get results for several countries by putting that routine in a loop:

const countries = ['Peru', 'Argentina', 'New Zealand', 'Ghana'];
for (const country of countries) {
	fetch(`https://api.duckduckgo.com/?q=${country}&skip_disambig=1&format=json`)
		.then(data => data.json())
		.then(json => json.Infobox.content.find(c => c.label === 'Capital').value)
		.then(capital => console.log(`${country} - ${capital}`));
}

Result:

Argentina - Buenos Aires
Peru - Lima
Ghana - Accra
New Zealand - Wellington

Well, not so cool now. Although we have all the results, they are put in random order. Sometimes it’s fine. But sometimes not. What then? Use asynchronous programming!

Sorted with single Promise

One option is using single Promises. Take a look at this example:

(async () => {
	const countries = ['Peru', 'Argentina', 'New Zealand', 'Ghana'];
	for (let country of countries) {
		const capital = await fetch(`https://api.duckduckgo.com/?q=${country}&skip_disambig=1&format=json`)
			.then(data => data.json())
			.then(json => json.Infobox.content.find(c => c.label === 'Capital').value);
		console.log(`${country} - ${capital}`);
	}
})();

Since fetch returns a Promise, we can use the async/await keywords to wait for it and then process it further synchronously.

The strange (async () => { ... })() syntax is an IIFE – Immediately Invoked Function Expression. It’s useful if you don’t have an async function to put the code in.

Another way of doing the same is by removing the chaining:

(async () => {
	const countries = ['Peru', 'Argentina', 'New Zealand', 'Ghana'];
	for (let country of countries) {
		const res = await fetch(`https://api.duckduckgo.com/?q=${country}&skip_disambig=1&format=json`);
		const json = await res.json();
		const capital = json.Infobox.content.find(c => c.label === 'Capital').value;
		console.log(`${country} - ${capital}`);
	}
})();

Result:

Peru - Lima
Argentina - Buenos Aires
New Zealand - Wellington
Ghana - Accra

The problem with these both approaches is that the API calls are now executed one at time. It works, but it’s slow. Because after every fetch, we return for the result before proceeding.

Sorted with parallel calls

The solution is first calling all APIs, then processing the results.

(async () => {
	const countries = ['Peru', 'Argentina', 'New Zealand', 'Ghana'];
	const results = countries.map(country =>
		fetch(`https://api.duckduckgo.com/?q=${country}&skip_disambig=1&format=json`)
		.then(data => data.json())
		.then(json => json.Infobox.content.find(c => c.label === 'Capital').value)
	);
	const capitals = await Promise.all(results);
	for (let capital of capitals) {
		console.log(`??? - ${capital}`);
	}
})();

Result:

??? - Lima
??? - Buenos Aires
??? - Wellington
??? - Accra

Now it works much faster, but… how to get the country name? The most reliable way is to attach it to the promise!

(async () => {
	const countries = ['Peru', 'Argentina', 'New Zealand', 'Ghana'];
	const results = countries.map(country =>
		fetch(`https://api.duckduckgo.com/?q=${country}&skip_disambig=1&format=json`)
		.then(data => data.json())
		.then(json => json.Infobox.content.find(c => c.label === 'Capital').value)
		.then(capital => ({ country, capital }))
	);
	const countriesWithCapitals = await Promise.all(results);
	for (let c of countriesWithCapitals) {
		console.log(`${c.country} - ${c.capital}`);
	}
})();

Result:

Peru - Lima
Argentina - Buenos Aires
New Zealand - Wellington
Ghana - Accra

It is possible to return an array instead of an object:

.then(capital => [ country, capital ])

...

console.log(`${c[0]} - ${c[1]}`);

but it’s less clear what is inside c[0] and c[1].

Łukasz Nojek – blog

Software development and architecture

Multiple return values from multiple promises

Category: Back-end, Front-end 2020-03-11 Łukasz Nojek

One country

Multiple countries

Sorted with single Promise

Sorted with parallel calls

Read next