JavaScript/ Parallel vs Sequential & Promise.all

 

<Sequential Request>

: 코드의 순서에 따라 진행

async function get3Pokemon() {
	// 순서에 따라서 코드진행 
	// they are independent lines
	const poke1 = await axios.get('http://pokeapi.co/api/v2/pokemon/1');
	// poke1 is a value(response) here, not a promise
	const poke2 = await axios.get('http://pokeapi.co/api/v2/pokemon/2');
	const poke3 = await axios.get('http://pokeapi.co/api/v2/pokemon/3');
	console.log(poke1.data);
	console.log(poke2.data);
	console.log(poke3.data);
}
get3Pokemon();

 

 

 

<Parallel Request의 옳지 않은 예시>

- 세개의 데이터 모두 undefine으로 출력된다.

async function get3Pokemon() {
	// poke1 IS a promise here
	const poke1 = axios.get('http://pokeapi.co/api/v2/pokemon/1');
	const poke2 = axios.get('http://pokeapi.co/api/v2/pokemon/2');
	const poke3 = axios.get('http://pokeapi.co/api/v2/pokemon/3');
	await poke1;
	await poke2;
	await poke3;
	console.log(poke1.data);//undefine
	console.log(poke2.data);//undefine
	console.log(poke3.data);//undefine
}
get3Pokemon();

 

 

 

<Parallel Request>

- 각각의 리퀘스트를 변수로 지정해 await를 걸어줌. 데이터 출력 확인 가능

async function get3Pokemon() {

	const prom1 = axios.get('http://pokeapi.co/api/v2/pokemon/1');
	const prom2 = axios.get('http://pokeapi.co/api/v2/pokemon/2');
	const prom3 = axios.get('http://pokeapi.co/api/v2/pokemon/3');
	const poke1 = await prom1;
	const poke2 = await prom2;
	const poke3 = await prom3;
	console.log(poke1.data);
	console.log(poke2.data);
	console.log(poke3.data);
}
get3Pokemon();

 

 

 

<Promise.all을 이용한 Parallel Request>

- 변수를 지정할 필요 없이 Promise.all을 이용해주면 간편

async function get3Pokemon() {
	const prom1 = axios.get('http://pokeapi.co/api/v2/pokemon/1');
	const prom2 = axios.get('http://pokeapi.co/api/v2/pokemon/2');
	const prom3 = axios.get('http://pokeapi.co/api/v2/pokemon/3');
	console.log(prom1); // <pending>
	const results = await Promise.all([prom1, prom2, prom3]);
	console.log(prom1); // <resolved>

	printPokemon(results);
}
//this code will be runned after all the promises are resolved

function printPokemon(results) {
	for (let pokemon of results) {
		console.log(podata.name);
	}
}

get3Pokemon();

-모든 코드는 Promise들이 처리된 후에 실행된다.