[자바스크립트] 비동기 함수

비동기 프로그래밍

자바스크립트는 싱글스레드이기 때문에 한 번에 하나의 작업만 수행할 수 있다. 하나의 작업이 끝날 때 까지 기다려야하는 문제를 해결하기 위해 비동기를 사용한다.

비동기는 특정 코드의 처리가 끝나기 전에 다음 코드를 실행할 수 있다.

비동기 방식

자바스크립트에는 콜백함수, Promise, async await 의 3가지 비동기 방식이 존재한다.

 

Callback 함수

함수의 매개변수에 다른 콜백 함수가 중첩되어 사용된다면 코드가 복잡해지고 유지보수가 힘들어진다.

이 경우 들여쓰기 수준이 깊어지는 현상인 '콜백 지옥'을 마주하게 된다.

Promise를 사용하여 '콜백 지옥'을 벗어날 수 있다.

Promise

Promise는 latency, delay 때문에 현재 당장 얻을 수 없지만 가까운 미래에 얻을 수 있는 데이터에 접근하기 위한 방법을 제공한다.

정상 수행 후 resolve, 실패 후 reject가 실행된다. resolve에 값을 담아 전달한다. 

•  Promise Chaninig :  .then()을 이용하여 여러개의 Promise를 이을 수 있다.

하지만 Promise도 중첩으로 인해 콜백과 같은 hell이 발생할 수 있다.

async, await

hell을 없애줄 수 있게 되었다.

기본 구조는 아래와 같다.

const getSomthing = async () => {
  await doSomething()
}

 

함수 앞에 async를 붙이고 비동기 처리할 코드 앞에 await를 붙인다.

Promise와 async await 코드 비교

•  Promise

const promise = new Promise((res, rej) => {
  console.log('first')
  setTimeout(() => {
    res('3초 후')
  }, 3000)
  console.log('end of function')
})

promise.then(res => console.log(res)).catch(err => console.error(err))

 

• async, await

const asyncFunc = async () => {
  try {
    console.log('first')
    await setTimeout(() => console.log('3초 후'), 3000)
  } catch (err) {
    console.log(err)
  }
  console.log('end of function')
}

asyncFunc()

async, await를 사용하였을 때 보다 깔끔한 코드 작성이 가능하다.