Promise보다 좋아보이는 async/await

재웅·2023년 4월 17일
0

오늘의 정리

목록 보기
12/52
post-thumbnail

async 키워드를 쓰면 Promise 오브젝트가 절로 생성

말그대로 new Promise() 이딴거 할 필요 없음
근데 이 키워드는 함수 선언 앞에만 붙일 수 있음

async function 더하기(){
  1 + 1 
}

더하기().then(function(){
  console.log('더하기 성공했어요')
});

위처럼 진짜 .then 쓸 수 있음 async만 붙였는디..

쫌 단점은 성공시에만 사용할 수 있음

// 연산한 결과를 then안에서 사용하고싶으면
async function 더하기(){
  return 1 + 1  //결과값을 퉤 뱉고
}

더하기().then(function(결과){ //여기 파라미터에 쑤셔넣기
  console.log(결과)
});

then() 함수가 귀찮다면 await 키워드

async 키워드를 쓴 함수 안에서는 await을 사용가능

await은 그냥 프로미스.then() 대체품으로 생각하면 됨

하지만 then보다 훨씬 문법이 간단함

// await 사용 전
async function 더하기(){
  var 어려운연산 = new Promise((성공, 실패)=>{
    var 힘든연산 = 1 + 1;
    성공(힘든연산);
  });
  어려운연산.then(function(){
  	console.log(힘든연산); //2
  });
}
더하기();
//await 사용 후
async function 더하기(){
  var 어려운연산 = new Promise((성공, 실패)=>{
    var 힘든연산 = 1 + 1;
    성공(힘든연산);
  });
  var 결과 = await 어려운연산; //await은 말그대로 기다려 라는 뜻 어려운연산promise가 해결될때까지 기다려~
  console.log(힘든연산); //2 
}
더하기();

await은 실패하면 에러가나고 코드가 멈춤요

async function 더하기(){
  var 어려운연산 = new Promise((성공, 실패)=>{
    실패();
  });
  var 결과 = await 어려운연산; //여기서 에러가 나고 코드가 멈춤 따라서 밑 코드들도 실행 안됨
  console.log(결과);
}
더하기();
//해결방법
async function 더하기(){
  var 어려운연산 = new Promise((성공, 실패)=>{
    실패(100);
  });
  try {  
    var 결과 = await 어려운연산;
  	console.log(결과);
  }
  catch { //어려운연산 Promise가 실패할 경우 실행할 코드
  	console.log('fail');
  } // <= fail이 실행됨
}

try {} 안의 코드가 에러가 나고 멈출 경우

대신 catch {} 내부의 코드를 실행

복잡하니까 그냥 then() 이런거 쓰는게 나을듯

좋아보이긴 하는데 promise가 나한테 잘맞는듯하다

profile
오늘의 정리

0개의 댓글