비동기

비동기 처리는 네트워크 통신에서만 해당하는 내용이 아니라 특정 로직에서도 충분히 사용될 수 있습니다. 그렇기 때문에 비동기 처리를 이해하는 것은 매우 중요합니다.

1. 비동기 처리 방식

1-1 콜백함수 이용

function getMovie(cb){
  fetch(API_URL)
    .then(res => res.json())
    .then(res => {
      cb(res)
  })
}

getMovie(movies => {
  console.log(movies)
})

하지만 콜백함수를 이용한 비동기 처리 방식의 경우 콜백지옥에 빠질 수도 있어, 이런 경우 작성하기도 어려워지지만 해석하기도 관리하기도 어렵다는 매우 큰 단점이 있습니다.

1-2 Promise 이용

이러한 콜백지옥을 개선하기 위해 나온 것이 바로 Promise 클래스 입니다.

function getMovie() {
  //promise instance가 반환되게 됩니다.
  return new Promise((resolve) => {
    fetch(API_URL)
      .then(res => res.json())
      .then(res => {
        resolve(res)
    })
  })
}

getMovie().then(res => console.log(res))

자바스크립트에서 기본적으로 내장되어 제공되는 fetch 함수처럼 getMovies라는 함수를 만들어 호출하고 그 결과를 then으로 받아 사용하는 구조를 만들었습니다.

언제 끝날지 알 수 없는 영화정보를 가져오는 로직을 getMovie로 호출한 후 비동기코드 then을 이용해 로직이 끝나면, 그 때 결과를 콜백안에서 사용하겠다는 작동원리입니다.

1-3 async await 이용

getMove() 코드 실행 결과 Promise Instance를 반환하기 때문에 .then(res => console.log(res)) 대신에 async await를 사용해 표현할 수 있습니다.

즉, getMovie().then(res => console.log(res))과 const res = await getMovie()의 코드 실행 결과는 같습니다.

하지만 async는 await가 포함된 함수로 감싸줘야하기 때문에 아래와 같이 정리할 수 있습니다.

function getMovie() {
  //promise instance가 반환되게 됩니다.
  return new Promise((resolve) => {
    fetch(API_URL)
      .then(res => res.json())
      .then(res => {
        resolve(res)
    })
  })
}

;(async function () {
  const res= await getMovie()
  console.log(res)
})()

2. 예외처리

특히 비동기코드에서 예외상황이란 언제든지 발생할 수가 있습니다. 따라서 예외처리를 해주어야합니다.

2-1 try {} catch(err) {} finally {}

aysnc, await을 사용하는 경우에는 try, catch문을 사용해 예외처리를 할 수 있습니다.