[JavaScript] 비동기 작업 - async, await

이번 글은 비동기 작업에서 Promise를 더 직관적이고 편하게 사용할 수 있게 도와주는 async와 await의 활용에 대한 글이다.

아래 링크는 이 블로그의 다른 비동기 작업에 대한 글이다.

https://hwangseoyoung.tistory.com/197

[JavaScript] 비동기 작업 - setTimeout(), 콜백함수

https://hwangseoyoung.tistory.com/198

[JavaScript] 비동기 작업 - promise(), then(), catch()

 

---

 

 

[ async (에이싱크) ]

async는 어떤 함수를 비동기 함수로 만들어주는 키워드로, 함수가 promise를 반환하도록 변환해주는 키워드이다.

 

아래 코드를 보면 함수 getData()가 async 키워드로 인해 비동기 함수로 바뀌었다.

async로 인해 객체를 그대로 반환하지 않고 객체의 결과값으로 새로운 promise를 반환하는 것을 확인할 수 있다.

결과 반환 시 promise 형태로 반환되고 상태는 성공(fulfilled)이고 결과(Result)로는 설정한 객체가 반환된다.

async function getData() {
  return {
    name: "황서영",
    id: "nah830",
  };
}

결과값

 

 

반면 아래 코드와 같이 이미 Promise를 반환하는 것이라면 그대로 반환값을 반환하고 async의 역할은 없다.

async function getData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve({
        name: "황서영",
        id: "nah830",
      });
    }, 1500);
  });
}

 

 

 

---

 

 

[ await ]

await은 비동기 함수가 다 처리되기를 기다리는 역할이다.

반드시 async 함수 내부에서만 사용이 가능한 키워드이고 함수 앞에 async가, then() 없이 호출되는 함수 앞에는 await 키워드가 작성된다.

 

then()을 사용해주면 아래와 같이 표현 가능하지만 await을 사용하면 더 간결하게 아래 코드를 표현할 수 있다.

async function printData() {
    getData().then((result) => {
    });
}

 

 

아래 코드를 보면 getData()가 반환하는 promise가 종료될 때까지 await이 있는 지점에서 기다린 후 종료가 되었을 시 변수에 결과값을 넣어주는 구조이다.

async function printData() {
    const data = await getData();
}

결과값

 

 

 

---