Promises. Async-Await

Funcions de fletxa

• https://www.youtube.com/watch?v=aIKL5tQP25Y

//https://www.youtube.com/watch?v=aIKL5tQP25Y
/*
cd /home/joan/M06_WEC_2122/UF4/promises_async_await/
node arrow_functions.js
*/

function fsquare(x) {
	return x*x;
}

const fsquare2 = function(x) { //funció anònima
	return x*x;
}

const squareArrow = (x) => x*x;
const squareArrow2 = (x) => { return x*x};

console.log(fsquare(2));
console.log(fsquare2(3));
console.log(squareArrow(4));
console.log(squareArrow2(5));

Promeses. Funcions asíncrones amb async/awayt

• https://www.youtube.com/watch?v=rKK1q7nFt7M

//https://www.youtube.com/watch?v=rKK1q7nFt7M
/*
cd /home/joan/M06_WEC_2122/UF4/promises_async_await/
node promises_async_await.js

NOTA: exemple d'on utilitzem async/await i bases de dades: parcellacio_v5.js (La Palma)
*/

const dades = [
	{ id : 1, title : 'Iron Man', year : 2008 },
	{ id : 2, title : 'Spiderman', year : 2017 },
	{ id : 3, title : 'Avengers', year : 2019 }
]

const dades2 = []

//funció sincrona
const getDades = () => { return dades; }

//funció asíncrona (simulem un delay)
const getDades2 = () => {
	setTimeOut = (() => {dades},1500);
}

const getDades3 = () => {
	return new Promise((resolve, reject) => {
		setTimeout(() => {resolve(dades);},1500);
	})
}

const getDades4 = () => {
	return new Promise((resolve, reject) => {
		setTimeout(() => {resolve(dades);},1500);
	})
}

//el mateix però amb control d'errors
const getDades5 = () => {
	return new Promise((resolve, reject) => {
		if (dades2.length===0) reject(new Error('no existeixen dades'));	
		setTimeout(() => {resolve(dades);},1500);
	})
}

async function fetchingData() {
	const dadesFetched = await getDades4();
	console.log(dadesFetched);
}

async function fetchingData2() {
	try {
		const dadesFetched = await getDades5();
		console.log(dadesFetched);
	} catch(err) {
		console.log(err.message);
	}
}


//la manera async-wait és la mateixa idea que les promeses (crida asíncrona), però la manera d'escriure-ho és més síncrona, més seqüencial
console.log(getDades());
console.log(getDades2()); //retorna undefined perquè el console.log() s'imprmeix immediatament, el console.log() no espera els 1500ms
console.log(getDades3()); //retorna Promise { <pending> } (així no es fa, falta alguna cosa encara)
getDades4()
	.then((dades)=>{return console.log(dades)}) //ara sí que espera el temps i imprimeix les dades
	.catch(err => console.log(console.log(err.message)));

fetchingData();
fetchingData2();

Tasques a realitzar (entrega de classe)

Visionar els dos vídeos que es proposen, i que s'han explicat a classe. El primer vídeo és un repàs de les funcions fletxa. El segon vídeo explica les Promises, i com fer funcions async/await per gestionar les funcions asíncrones.

Entregaràs el script_funcions_arrow.js i el script_promises.js, demostrant que els has executat en la teva màquina i que has fet canvis en el codi. Obligatòriament has de fer els següents canvis:

• del primer script, canvia el contingut de la funció (que no sigui elevar al quadrat un número).
• del segon script, canvia el contingut de l'array de dades.

---

creat per Joan Quintana Compte, febrer 2022