본문 바로가기

개발 일지/JavaScript

JavaScript async/await

 Promise 함수를 사용하는게 불편하다면 그보다 쉽게 쓸 수 있는 ES8문법이 있다. 

async, await 라는 키워드 인데 각각 Promise와 then을 쉽게 만들어 주는 문법이다. 

 

async

함수 앞에 async 를 앞에 붙이면 함수 실행 후  Promise  오브젝트를 리턴한다. 

그래서 

      async function test() {
        return 1 + 1;
      }

      test().then(function (result) {
        console.log(result)
        console.log("성공");
        
      });

이렇게도 가능하다. 

왜냐하면 async를 붙이는 순간 함수가 Promise 함수가 되어버리기 때문..

 

await

anync 키워드를 쓴 함수 안에서는 await 를 사용할 수 있다. 

await 는 .then() 을 대체 할 수 있으면서도 then() 보다 문법이 간단하다. 

그래서

     async function test2() {
        const 어려운연산 = new Promise((resolve, reject) => {
          const result = 1 + 1;
          resolve(result);
        });
        const result = await 어려운연산;
        console.log(result);
      }

이렇게 사용 가능하다. 

그런데 만약 어려운 연산이라는  Promise 가 실패할 경우

await 변수 의 코드는 에러가 나고 코드 실행이 멈출 것이다. 

여기서 코드 실행을 멈추고 싶지 않다면 try catch 라는 문법을 사용할 수 있다. 

 

try catch

try catch 는 자바스크립트 문법인데,

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

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

      async function test3() {
        const 어려운연산 = new Promise((resolve, reject) => {
          const result = 1 + 1;
          result > 3 ? resolve() : reject();
        });
        try {
          const result = await 어려운연산;
          console.log(result);
        } catch {
          console.log("실패");
        }
      }

위와 같이 catch{} 를 사용하여 에러처리가 가능하다. 

 

 

 

 

 

'개발 일지 > JavaScript' 카테고리의 다른 글

Parameter 와 Argument  (0) 2023.03.28
호이스팅 과 TDZ  (0) 2023.03.28
REST API가 뭔가요  (0) 2023.03.27
웹페이지가 브라우저에 렌더링 되는 과정  (0) 2023.03.27
JavaScript Promise  (0) 2022.12.20