API Example

const apiUrl = 'https://random-data-api.com/api/v2/users?size=2';

fetch(apiUrl)
	.then(res => res.json())
	.then(data => doSomething(data));

just print it

function doSomething(data) {
	console.log(data);
}

dom manipulation

function doSomething(data) {
	document.body.innerHTML = `
		<h1>data:</h1>
		<pre>${JSON.stringify(data, null, 2)}</pre>
	`;
}

Async Await

Promise (no syntactic sugar)

function shahar1() {
	fetch(apiUrl)
		.then(res => res.json())
		.then(data => doSomething(data));
}

async await syntax

async function shahar2() {
	const res = await fetch(apiUrl);
	const data = await res.json();
	doSomething(data);
}

Dealing with Failure

Promise (no syntactic sugar)

function shahar1() {
	fetch(apiUrl)
		.then(res => res.json())
		.then(data => {
			if (true) throw 'shahar exception'; // simulate failure
			doSomething(data);
		})
		.catch(error => {
			document.body.innerHTML = `<h1>fetch failed!</h1>`;
		});
}

async await syntax

async function shahar2() {
	try {
		const res = await fetch(apiUrl);
		const data = await res.json();
		if (true) throw 'shahar exception'; // simulate failure
		doSomething(data);
	}
	catch (error) {
		document.body.innerHTML = `<h1>fetch failed!</h1>`;
	}
}