Promises have been implemented in javascript to make asynchronous functions behave like synchronous functions, this is possible thanks to the Async and Await keywords, which allow us to deal with functions that return promises.

In javascript, input and output (I/O) operations are not blocked, so they work asynchronously (except for callbacks that are executed after the process ends)

In conclusion, Async/Await is based on promises

Define an array of objects that contains the data that will be returned to the console after a certain execution time, let's take the example that we are storing user data.

const data = [
	{
		id: '01',
		name: 'Clark',
		lastName: 'Davis',
		age: '31'
	},
	{
		id: '02',
		name: 'Irwin',
		lastName: 'Jones',
		age: '28'
	},
]

Create an asynchronous function that returns the array of objects when the promise resolves after two seconds

const getData = () => {
	return new Promise((resolve, reject) => {
		setTimeout(() => {
			resolve(data)
			// reject(new Error('Failed!'))
		}, 200)
	})
}

To execute a callback we use the setTimeout function to run a callback after a defined time

The first way we are going to see to handle promises is using then(), this way the callback will be executed when the promise is fulfilled, and using catch() to handle the promise when it fails.
There is an optional method called finally() that will execute the code regardless of whether the promise succeeds or fails.

getData()
	.then((response) => console.log(response)
	.catch((err) => console.error(err.message))

Using the asynchronous await and await keywords, we get a way to write the code more sequentially, the calling code will pause until the promise is resolved and then the next line of the script will be executed.


Now let's write the above code using async and await

(async function() {
	try {
		const response = await getData()
		console.log(response)
	} catch (error) {
		console.error(error.message)
	}
})()

The output to the console will be the same as using then(), while also setting setTimeout, but making changes to code that uses async/await is simpler and easier to read.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop