JS async & await

async & await

async와 await은 JS의 비동기 처리 방식인 Promise를 더 쉽게 작성하고, 가독성이 좋게 만들어주는 문법입니다.

 

      async function 함수명() {

        await 비동기_처리_메서드명();

      }

 

• async는 함수가 Promise를 반환하도록 하는 키워드입니다.
• await은 async 함수 내에서 사용할 수 있는 키워드로 함수 실행을 일시 중지하고 Promise가 처리되면 결과와 함께 함수가 다시 실행됩니다.

async

async는 function 앞에 붙이는 키워드로 함수가 Promise를 반환하도록 하는 키워드입니다.

만약 Promise가 아닌 값을 반환하더라도 Promise.resolve("반환값") 형식인 이행된 Promise가 반환됩니다.

아래 예시를 보면 "Hello World"인 이행 Promise가 반환됨을 확인할 수 있습니다.

      async function f() {

        return "Hello World";     // return Promise.resolve("Hello World");

      }

      f().then(function (value) {

        console.log(value);

      });

 

 

await

await는 async 함수 내에서 사용할 수 있는 키워드입니다. 해당 키워드를 만나면, 함수 실행을 일시 중지하고 Promise가 처리되면 결과와 함께 함수가 다시 실행됩니다. 즉, Promise에서 then() 보다 작성하기 쉽고 가독성을 좋게 만들어 줍니다.

      async function f() {

        let promise = new Promise((resolve, reject) => {

          setTimeout(() => resolve("ALERT"), 5000);

        });

        let result = await promise; // Promise가 이행될 때까지 기다림

        alert(result);                       // "ALERT"

      }

      console.log("f() 함수 실행 전");

      f();

      console.log("f() 함수 실행 후");

     

• f() 함수 실행 전
• f() 함수 실행 후
• 5초 후 ALERT 알림창

await는 의미 그대로 Promise가 처리될 때까지 기다립니다. Promise가 처리되길 기다리는 동안 다른 일을 할 수 있기 때문에 CPU 리소스가 낭비되지 않습니다.

 

---

async/awiat 에러 처리

아래 두 코드는 동일한 코드입니다. Promise가 거절되면 에러가 발생됩니다.

      // 코드 1

      async function f() {

        await Promise.reject(new Error("Error"));

      }

      // 코드2

      async function f() {

        throw new Error("Error");

      }

 

 

await가 던진 에러는 throw가 던진 에러를 잡을 때 처럼 try..catch 문법을 통해 잡을 수 있습니다.

      async function f() {

        try {

          let response = await fetch('https://...');

          let result = await response.json();

        } catch (e) {

          alert(e);

        }

      }

      f();