[javascript] 비동기 작업 / async, await

async

 

10초 정도 걸리는 네트워크 통신을 하여 비동기로 서버에서 데이터를 받아온다고 가정했을 때, 

//do network request in 10 sec...
function getUser() {
  setTimeout(() => {
    return "espania";
  }, 1000);
}

const user = getUser();

console.log("user : ", user);	//undefined 출력

데이터를 받아오기 전에, 'console.log(user)' 함수를 호출 하므로 undefined가 출력된다.

이 때 call back 함수 나 Promise 객체를 사용하게되면, 비동기로 서버에서 받은 데이터를 처리할 수 있다.

//call back function
function getUser2(cb) {
  setTimeout(() => {
    cb("espania");
  }, 1000);
}

getUser2((res) => {
  const user2 = res;
  console.log("user2 : ", user2);	//espania 출력
});

//Promise function
function getUser3() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve("espania");
    }, 1000);
  });
}

getUser3().then((res) => {
  const user3 = res;
  console.log("user3 : ", user3);	//espania 출력
});

 

앞에 방법들로 비동기 작업을 처리할 수 있지만 조금더 간편하게 비동기 작업을 처리할 수 있는 방법이 async 키워드를 이용하는 것이다.

//async
function delay(ms) {
  return new Promise((resolve) => {
    setTimeout(resolve, ms);
  });
}

async function getUser4() {
  delay();
  return "espania";
}

getUser4().then((res) => {
  const user4 = res;
  console.log("user4 : ", user4);	//espania 출력
});

위와 같이, 함수 앞에 async 키워드를 붙이게 되면, 해당 함수는 Promise 객체를 반환한다.

 

 

await

 

 

await 키워드는 async 키워드를 가진 함수 내부에서만 사용 할 수 있다.



비동기 처리 함수에 await 키워드를 붙이게 되면 동기적으로 수행한다.

//await
function delay(ms) {
  return new Promise((resolve) => {
    setTimeout(resolve, ms);
  });
}

async function getApple() {
  await delay(3000);	//3초 기다리고 실행
  return "apple";
}

다음과 같이 비동기 함수를 처리하는 'delay' 함수 앞에 await 을 붙이게 되면 해당 함수를 동기적으로 처리한다.

 

728x90

Promise를 async로 변경하기!!

 

 

getApple 과 getBanana 라는 함수가 있을 때,

async function getApple() {
  await delay(3000);
  return "apple";
}

async function getBanana() {
  await delay(3000);
  return "banana";
}

Promise 객체를 다음과 같이 중첩적으로 체이닝을 하게되면 코드가 복잡해지고 가독성이 떨어진다.

function pickFruits() {
  return getApple().then((apple) => {
    return getBanana().then((banana) => {
      return `${apple} + ${banana}`;
    });
  });
}

pickFruits().then(console.log);

따라서 async를 사용하면 로직을 좀 더 간단하게 만들 수 있다.

pickFruits().then(console.log);

async function pickFruits2() {
  const apple = await getApple();
  const banana = await getBanana();

  return `${apple} + ${banana}`;
}

pickFruits2().then(console.log);

 

 

참고

 

 

https://espania.tistory.com/341

[javascript] 비동기 작업 / Promise

https://espania.tistory.com/338

[javascript] 비동기 작업