비동기 2편(async, await)

비동기 2편에서 설명할 async, await은 promise보다 비교적 코드를 보기 좋은 형태로 작성할 수 있으며 비동기의 단점을 해결할 수 있다.

우선 async와 await은 독립적인 기능이 아니라 같이 사용한다.

그럼 다음 코드를 살펴보자!

 

const err = false

const PROMISE = (count) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if(err) reject('에러 발생');
      resolve(`실행${count}`);
    },200)
  })
}

async function install(){
  const start1 = await PROMISE(1)
  const start2 = await PROMISE(2)
  const start3 = await PROMISE(3)
  console.log(start1,start2,start3)
}

install()

 

일단 실행결과는 다음과 같다.

 

실행1 실행2 실행3

 

위의 install()함수는 await을 통해 promise객체를 반환한다.

함수명 옆에 async가 붙은 함수 내부에 await와 함께 비동기 함수를 호출하였을 경우 await PROMISE(2)는 await PROMISE(1)의 실행이 끝날 때까지 기다린다.

await PROMISE(1)이 값을 반환하고 나서 await PROMISE(2)가 실행되고 또 await PROMISE(2)가 값을 반환하면 await PROMISE(3)가 실행된다.

 

한편 async, await는 다음과 같이 간단하게 예외처리를 할 수 있다.

 

const err = true

const PROMISE = (count) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if(err) reject('에러 발생');
      resolve(`실행${count}`);
    },200)
  })
}

async function install(){
  try{
    const start1 = await PROMISE(1)
    const start2 = await PROMISE(2)
    const start3 = await PROMISE(3)
    console.log(start1,start2,start3)
  }
  catch(err){
    console.log(err)
  }
}

install()

 

만약 PROMISE()에서 에러가 발생하면 reject()가 실행되며 reject()의 인자 값은 catch()의 인자 값인 err로 들어온다.

다시 정리하자면 async, await는 비동기 함수들을 동기 처리로 실행할 수 있으며 await를 통해 호출하는 함수는 promise 객체를 반환하는 비동기 함수여야 한다.

 

한편 async 함수는 promise패턴과 비슷한 특징을 갖고 있는데 그것은 promise객체에서 resolve()를 호출한 것과 같이 코드를 실행하는 것이다.

예시 코드와 실행결과는 다음과 같다.

 

const PROMISE = async () => {
  return '실행1'
}

PROMISE()
  .then(result => {console.log(result)})

 

실행1

 

마치 resolve()를 호출한 것처럼 '실행1'이 then()의 result로 들어왔다.

또한 위 예시 코드를 아래의 코드처럼 await로 나타내도 같은 값을 출력한다.

 

const PROMISE = async () => {
  return '실행1'
}

async function install(){
  try{
    const start = await PROMISE();
    console.log(start);
  }
  catch(err){
    console.log(err);
  }
}

install()

 

실행1

 

물론 async가 promise객체를 반환하는 듯한 특징을 갖고 있지만 실제로 비동기를 제어할 때는 제대로 promise객체를 만들어서 await을 붙이는 것이 올바른 사용법이기에 주의하자!

 

한편 async, await도 Promise.all을 사용할 수 있으며 예시코드와 실행결과는 다음과 같다.

 

const err = false

const PROMISE = (count) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if(err) reject('에러 발생');
      resolve(`실행${count}`);
    },200)
  })
}

async function install(){
  try{
    const start = await Promise.all([PROMISE(1),PROMISE(2),PROMISE(3)])
    console.log(start)
  }
  catch(err){
    console.log(err)
  }
}

install()

 

["실행1", "실행2", "실행3"]