🤓 What I Learned Today

오늘은 여러가지로 막히는 하루라 그냥 간단하게 개념정리만..!

1.async

예를 들면 사용자의 데이터를 백엔드에서 받아오는데 10초정도 걸리는 코드가 있다고 가정해보자

function fetchUser( ) {
//do network request in 10 secs...

	return 'mememe'	
}
const user = fetchUer();
console.log(user)

자바스크립트엔진은 동기적으로 수행하기 때문에 .. 오래 걸리는 코드를 비동기적인 처리를 전혀 하지 않으면 코드를 순차적으로 보여주는 동안 사용자는 10초정도 빈화면을 보고 있기 때문에 문제가 된다.

그러면 어떻게 비동기적으로 만들까?

먼저, promise 를 사용하는 방법이 있다.

function fetchUser( ) {
//do network request in 10 secs...
return new Promise((resolve,reject)=>{
	resolve('ellie');
});
}
const user = fetchUer();
user.then(console.log)
console.log(user)

좀더 간편하게 만들기..

async function fetchUser( ) {
//do network request in 10 secs...

	return 'mememe'	
}
const user = fetchUer();
user.then(console.log)
console.log(user)

async 라는 키워드를 함수앞에 쓰면 코드블록이 자동으로 promise로 바뀐다.

2.await

function delay(ms) {
	return new Promise(resolve => setTimeout(resolve, ms))
}

async function getApple() {
	await delay(1000);
	return 'apple';
}

async function getApple() {
	await delay(1000);
	return 'banana';
}

function pickFruits() {
	return getApple().then(apple => {
		return getBanana().then(banana => `${apple}+${banana}`);
});
}

pickFruits().then(console.log);

하지만! 이 코드의 문제점은 너무 체이닝하고 있어 콜백지옥의 문제를 일으켜 문제가 된다.

다시 코드를 고쳐보자…!

function delay(ms) {
	return new Promise(resolve => setTimeout(resolve, ms))
}

async function getApple() {
	await delay(1000);
	return 'apple';
}

async function getApple() {
	await delay(1000);
	return 'banana';
}

async function pickFruits() {
	try {
		const apple= await getApple();
		const banana= await getBanana();
} catch() {
	..........
}
	return `${apple}+${banana}`;
}

pickFruits().then(console.log);