async / await

 

async / await는 자바스크립트의 비동기 처리 패턴 중 가장 최근에 나온 문법으로, 기존의 비동기 처리 방식인 콜백 함수와 프로미스의 단점을 보완하고 개발자가 읽기 좋은 코드를 작성할 수 있게 도와줌

특히, 복잡했던 promise를 조금 더 편하게 사용할 수 있다.

 

    async function 함수명() {
      await 비동기_처리_메서드_명();
    }

 

async 키워드는 function 앞에 사용한다. 

function 앞에 async를 붙이면 해당 함수는 항상 프로미스를 반환함

프로미스가 아닌 값을 반환하더라도 이행 상태의 프로미스(resolved promise)로 값을 감싸 이행된 프로미스가 반환되도록 한다.

    async function f() {
      return 1;
    }

    f().then(alert); // 1

 

    async function f() {
      return Promise.resolve(1);
    }

    f().then(alert); // 1

 

즉, async가 붙은 함수는 반드시 프라미스를 반환하고, 프라미스가 아닌 것은 프라미스로 감싸 반환한다.

 

 

 

await는 async 함수 안에서만 동작함. await는 프로미스가 처리될 때까지 함수를 기다리게 하고 결과는 그 이후 반환

프로미스가 처리되기 기다리는 동안엔 엔진이 다른 일(다른 스크립트 실행, 이벤트 처리 등)을 할 수 있기 때문에 cpu 리소스가 낭비되지 않음

    async function f() {

      let promise = new Promise((resolve, reject) => {
        setTimeout(() => resolve("완료!"), 1000)
      });

      let result = await promise; // 프라미스가 이행될 때까지 기다림 (*)

      alert(result); // "완료!"
    }

    f();

 

 

---

 

async await 를 사용한 깃헙의 프로필 사진을 보여주는 코드 예시이다

    async function showAvatar() {

      // JSON 읽기
      let response = await fetch('/article/promise-chaining/user.json');
      let user = await response.json();

      // github 사용자 정보 읽기
      let githubResponse = await fetch(`https://api.github.com/users/${user.name}`);
      let githubUser = await githubResponse.json();

      // 아바타 보여주기
      let img = document.createElement('img');
      img.src = githubUser.avatar_url;
      img.className = "promise-avatar-example";
      document.body.append(img);

      // 3초 대기
      await new Promise((resolve, reject) => setTimeout(resolve, 3000));

      img.remove();

      return githubUser;
    }

    showAvatar();

• async/await을 사용하면 await가 대기를 처리해주기 때문에 .then이 거의 필요하지 않다. 또한 .catch 대신 일반 try..catch를 사용할 수 있다는 장점도 있다. 항상 그러한 것은 아니지만, promise.then을 사용하는 것보다 async/await를 사용하는 것이 대개는 더 편리하다
• 그런데 문법 제약 때문에 async함수 바깥의 최상위 레벨 코드에선 await를 사용할 수 없다. 그렇기 때문에 관행처럼 .then/catch를 추가해 최종 결과나 처리되지 못한 에러를 다룬다.