자바스크립트 - async/await

저번시간에 배운 프로미스 객체에 대해 복습할 겸, 프로미스 객체를 사용해 간단한 비동기 처리 함수를 작성해보겠습니다.

 

delay라는 함수를 작성하고, delay함수에서는 setTimeout 함수에서 사용할 매개변수를 받습니다.

프로미스 객체를 반환하고 resolve함수를 호출해주고, delay함수 아래에는 start함수를 생성하고 delay함수를 호출했습니다.

delay함수의 인수로는 2000을 넘겨 2초동안 지연하게 해주고, then 메서드를 사용해, "대기"라는 단어를 출력합니다.

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

const start = () => {
  delay(2000).then(()=>{
    console.log("대기");
  });
};

start();

결과는 start함수를 호출하면 2초후에 "대기"라는 단어가 출력됩니다.

 

async/await

위의 코드를 async/await를 이용해 더 직관적인 코드로 변경할 수 있습니다.

async와 await문법은 프로미스 객체를 더욱 쉽게 작성할 수 있고, 직관적으로 코드를 해석할 수 있습니다. 

 

 

async

async 키워드는 함수 이름의 오른쪽에 작성됩니다. 

이 async키워드가 붙은 start함수를 출력해보면

프로미스가 출력되는 것을 볼 수있습니다.

 

따라서 이렇게 async를 붙인 함수는 자동으로 프로미스 객체를 반환하는 비동기처리 함수가 되기 때문에,

이 start함수를 이렇게 then 메서드를 사용해 작성할 수 있습니다.

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

const start = async()=>{
  return "대기";
};

start().then((res)=>{
   console.log(res);
});

코드를 실행해보면 "대기"가 출력되는 것을 볼 수 있습니다.

이 start함수의 반환 값이, start 함수가 반환하는 프로미스 객체의 resolve 값과 동일하기 때문입니다.

 

이렇게 함수에 async 키워드만 붙이면 프로미스 객체를 반환함과 동시에 리턴문 옆에 작성한 값이 

resolve의 결괏값으로 전달되기 때문에 훨씬 깔끔한 코드를 작성할 수 있습니다.

 

 

 

awiat

await 키워드는 특정함수의 안에 작성되고, 이 then 키워드를 대신해 사용할 수 있습니다.

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

const start = async () => {
  await delay(2000);
  console.log("대기");

};

start()

await 키워드는 async키워드가 붙어있는 함수의 내부에서만 사용가능하며, "기다리다"라는 뜻을 지닌 만큼, 해당 프로미스가 처리될 때까지, 즉 delay 함수가 처리 완료 될 때까지 기다린 다음, 결과값을 받아 볼 수 있기 때문에 await가 작성된 함수가 종료되기 전에는 그 아래 작성된 코드들은 수행되지 않습니다.

 

await를 지우고 실행하면 "대기"라는 단어가 바로 실행되지만,

await을 작성하고 코드를 실행하면, 2초후에 "대기"라는 단어가 출력됩니다.

 

 

장점

async와 await으로 비동기 함수를 처리하게 되면, 프로미스 객체를 훨씬 가독성 좋게 사용 가능하고, 편리하게 사용할 수 있으며, 기존에 실행 순서가 예측이 불가능 했던 비동기 처리 방식과는 달리, 비동기 함수의 실행 순서를 예측할 수 있게 만들어줍니다.

 

 

---

 

에러핸들링

• async/await을 사용할 때 에러를 처리하는 방법에 대해 알아보겠습니다.

앞서 프로미스 객체를 이용해 비동기 처리를 할 경우 .catch를 이용해 에러처리를 했었는데

async와 await를 이용해 비동기 처리를 할 경우 try catch문법을 이용해 예외처리를 할 수 있습니다.

 

try 블록 : 작성된 코드가 실행 

catch 블록 : 에러가 발생할때의 코드 

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

const start = async () => {
    try {
        await delay(2000);
        console.log("대기");
    } catch (error) {
        console.log(error);
    }
};

start();

 

 

정리

• async/await은 프로미스 객체를 좀 더 직관적으로 편리하게 사용할 수 있게 도와주는 키워드이고, async가 붙은 함수는 항상 프로미스 객체를 반환하고, await 키워드는 async 함수 내부에서만 사용가능하며, 이 await가 붙은 함수에서는 해당 프로미스가 처리 될 때 까지 대기하게 됩니다.. 그리고 try/catch를 사용해 에러를 핸들링할 수 있습니다. 

 

 

 

 

---

참고자료

https://www.inflearn.com/course/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%B2%AB%EA%B1%B8%EC%9D%8C

웹 프론트엔드를 위한 자바스크립트 첫 걸음 - 인프런 | 강의