async / await

gyomni·2022년 1월 8일
0

JavaScript

목록 보기
7/14
post-thumbnail

async / await

  • Promise를 더 간결하고 간편하고, 동기적으로 실행되는 것처럼 보이게 만들어주는 것.

  • 새로운 것이 추가된 것이 아니라, 기존에 존재하는 Promise위에 조금 더 간편한 API를 제공한다.

  • 깔끔하게 Promise를 사용할 수 있는 방법, 그렇다고 항상 Promise가 나쁘고 async , await로 대체해서 사용해야 한다는 것은 아님!!

  • Promise를 유지해서 써야 맞는 경우가 있고 async , await로 변환해서 써야 깔끔해지는 경우가 있음.
    ( -> 프로젝트 해보면서 감 잡자!!)

  • Promise안에는 resolvereject로 완료를 해줘야 한다. 아니면 Promise statepenging이고, 결과는 undefined됨.

    📍 Promisechaining
    promise then, promise then …..
    =>이런식으로 chining을 계속하게 되면 코드가 난잡해질 수 있다~~!
    이런 것 위에 조금 더 간편한 API로 asyncawait를 사용하면 동기식으로 코드를 순서대로 작성하는 것처럼 간편하게 코드를 작성할 수 있게 도와준다.

    ✨ syntactic sugar : 기존에 존재하는 것 위 or 기존에 존재하는 것을 감싸서 우리가 조금 더 간편하게 쓸 수 있는 API를 제공하는 것


> 코드

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

async function process() {
  console.log('good night');
  await sleep(1000);
  console.log(('good morning');
}

process();

> 결과

good night
// 1초뒤
good morning

📍 async - await 문법을 사용할 때는! function 앞 부분에 async,
Promise 앞부분에 await 적어주기~!

그러면 Promise를 기다리는 것을 .then으로 안해도 되고 그냥 await로 기다려 줄 수 있음.


> 코드

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

async function process() {
  console.log('good night');
  await sleep(1000);
  console.log('good morning');
  return true;
}

process().then(value=>{
	console.log(value);
});

> 결과

good night
// 1초뒤
good morning
true

📍 async를 사용하게 된다면 함수의 결과물은 Promise를 반환하게 된다.


> 코드

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

async function makeError(){
	await sleep(1000);
 	const error = new Error();
 	throw error;
}

// error 잡기
async function process(){
	try{
   	await makeError();
   } catch (e){
     console.error(e)
	}
}

process();

> 결과

// 1초뒤
Error

📍 Error 발생 : throw
Error 잡기 : try-catch 문 사용

profile
Front-end developer 👩‍💻✍

0개의 댓글