[JS] Async & Await

3

자바스크립트

목록 보기
1/7
post-thumbnail

🙆🏻‍♀️ [JS] Async & Await 🙆🏻‍♀️

Promise의 Syntactic sugar(문법적 설탕)


비동기적인 작업을 사용자가 컨트롤하게 해주는 Promise.
콜백지옥을 벗어나기 위한 방법이지만, 이 Promise도 체이닝이 반복되면 또 다른 지옥에 빠지기 쉽상이다.

그래서 ES7(ES2017)에 추가된 것이 Async&Await!
Promise 코드를 좀 더 직관적으로 보이게 도와주는 Syntactic sugar다.



사용법


function promiseFunc(){
  return new Promise((resolve, reject) => {
    resolve("안녕, 안녕!")
  });
}

async function asyncFunc(){
  return "안녕, 안녕!"
}

함수 앞에 async를 붙여주면 Promise 객체를 생성하여 리턴하지 않아도 Promise를 리턴한다.

async function getUserName(idx){
  const getUser = await fetch(`uri~~/${idx}`);
  const user = await getInfos.json();
  	
  return user.name;
}

promise를 리턴하는 비동기 함수 앞에 await을 붙여줬다.
이렇게 하면 결과 값을 얻기 전까지 기다린 다음에 다음 라인으로 넘어 간다.
코드를 직관적이고 동기적으로 작성할 수 있다.



예외 처리는 어떻게?


Promise를 사용할 시에는 then, catch 로 예외 처리를 하지만
async&await을 사용하면 동기, 비동기 구분 없이 try/catch문으로 예외 처리를 할 수 있다.

async function getUserName(idx){
  try {
    const getUser = await fetch(`uri~~/${idx}`);
    const user = await getInfos.json();
  	
    return user.name;
  } catch(err){
    console.error(err);
  }
}


세상에, 간단해😏


흙흙 제대로 이해해 두면 정말 행복할 것 같은 Async&Await...🤔
현재, 콜백으로 처리해 둔 API호출 코드를 수정하는 것부터 성공해보자...!
끝으로 언제나 지대한 도움을 받고 있는 드림코딩 엘리님,,,☆

profile
당당하게 외치고 싶어요. "나, 「프런트엔드 개발자」야" 라고...😏

3개의 댓글

comment-user-thumbnail
2021년 9월 1일

잘 보고 갑니다! 아주 유익한 내용이네요! []~( ̄▽ ̄)~*

1개의 답글
comment-user-thumbnail
2023년 12월 21일

저도 잘 보고 갑니다 ^^~

답글 달기