Asynchroniczność w JavaScript

Callback Async - Funkcje · 27 min

const getPokemon = (name, success, error) => {
	request(`https://pokeapi.co/api/v2/pokemon/${name}`, (err, res, body) => {
		if (err) {
			error(err);
		}

		success(JSON.parse(body));
	});
};

const getType = (type, success, error) => {
	request(type, (err, res, body) => {
		if (err) {
			error(err);
		}

		success(JSON.parse(body));
	});
};

getPokemon('ditto', (pokemon) => {
	const typeUrl = pokemon.types[0].type.url;

	getType(typeUrl, (type) => {
		console.log(type);
	});
});

Higher-Order Function · 4 min

const modify = (x, action) => action(x);
modify(5, (x) => x * 2) /*?*/

Currying · 5 min

const curr = (x) => (y) => x + y;
curr(5)(4)

Pure functions · 6 min

const nums = [1, 2, 3]
const impure = (arr) => {
	arr.forEach((item, index) => (arr[index] = item * new Date())) // Side effects
	return arr
}
impure(nums)
console.log(nums)

Event Loop · 11 min

function task1() {
	console.log('task 1')
	return task2()
}
function task2() {
	console.log('task 2')
	return task3()
}
function task3() {
	console.log('task 3')
	return task4()
}
function task4() {
	return 'done'
}

task1()

Callback · 16 min

const multiply = (x, y) => x * y

multiply(5, 4)

const ref = multiply

ref(2, 4)

const double = (x, callback) => callback(x, 2) // Higher Order Function

// Callback #1
double(5, multiply)

// Callback #2
const arr = [1, 2, 3]
arr.filter((i) => i % 2)

// Callback #3
const btn = document.querySelector('btn');
btn.addEventListener('click', () => {
  console.log('Click3d!');
});

Currying · 21 min

const add = function (a, b) {
	return a + b
}

add(3, 5)

const currying = function getA(a) {
	return function getB(b) {
		return a + b
	}
}

const part1 = currying(5)
const part2 = part1(3)

const curry = currying(5)(3)

Callback Async · 24 min

const name = 'ditto'

request(`https://pokeapi.co/api/v2/pokemon/${name}`, (err, res, body) => {
	if (err) console.log(err)

	const pokemonData = JSON.parse(body)
	const typeUrl = pokemonData.types[0].type.url

	request(typeUrl, (err, res, body) => {
		if (err) console.log(err)

		const type = JSON.parse(body)
		pokemonData.type = type

		request(url, () => {
			// ...
		})
	})
})

Promise Async · 32 min

const getPokemon = (name) => {
	return new Promise((resolve, reject) => {
		request(`https://pokeapi.co/api/v2/pokemon/${name}`, (err, response, body) => {
			if (err) {
				console.log(err)
			}

			resolve(JSON.parse(body))
		})
	})
}

const getType = (type, success, error) => {
	return new Promise((resolve, reject) => {
		request(type, (err, response, body) => {
			if (err) {
				reject(err)
			}

			resolve(JSON.parse(body))
		})
	})
}

getPokemon('ditto')
	.then((pokemon) => {
		const typeUrl = pokemon.types[0].type.url

		getType(typeUrl)
			.then((type) => {
				console.log(type)
			})
			.catch((err) => console.log(err))
	})
	.catch((err) => console.log(err))

Async Await · 34 min

const name = 'dittoe';
	const data = await fetch(`https://poekeapi.co/api/v2/pokemon/${name}`);
  const pokemon = await data.json();
  console.log(pokemon);

Try catch · 36 min

try {
    const name = 'ditto';
    const data = await fetch(`https://poekeapi.co/api/v2/pokemon/${name}`);
    const pokemon = await data.json();
	  pokemon.name
  } catch (err) {
    console.log(err.message);
  }

Async Await helper · 39 min

const name = 'ditto'

	const handleError = (fn) => (...params) =>
		fn(...params).catch((err) => {
			console.log(err.message)
		})

	const getPokemon = handleError(async (name) => {
		const data = await fetch(`https://pokeapi.co/api/v2/pokemon/${name}`)
		return await data.json()
	})

	const pokemon = await getPokemon(name)
	console.log(pokemon?.name)