Asynchrounous functions, Promises, Fetch

Javascript is a single threaded event loop.

Synchronous functions pause further execution until they are complete.

Asynchronous functions return a Promise, which has a callback function that runs when complete.

Asynchronous functions are useful when something takes time to load but there are other things to process on the page.

When using asynchronous functions, your code may not execute in the order that it's written, so be careful if you need to access variables set in an asynchronous function.

Asynchronous functions

Asynchronous functions begin with "async" and allow you to use await.

The await keyword is permitted within the function body, enabling asynchronous, promise-based behavior to be written in a cleaner style and avoiding the need to explicitly configure promise chains.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function

async function loadData(url) {
	await return fetch(url)
	  .catch(error => console.log(error))
	  .then(response => response.text())
}