Effective Typescript - 아이템 25

Item 25 - 비동기 코드에는 콜백 대신 async 함수 사용하기

 

과거 자바스크립트 에서는 비동기 동작을 구현하기 위해 콜백을 사용하였고, 그렇기 때문에 '콜백 지옥(callback hell)'을 마주할 수 밖에 없었습니다.

function fetchURL(url: string, cb: (response: string) => void) {
  cb(url);
}
const url1 = "1";
const url2 = "2";
const url3 = "3";
// END
fetchURL(url1, function (response1) {
  fetchURL(url2, function (response2) {
    fetchURL(url3, function (response3) {
      // ...
      console.log(1);
    });
    console.log(2);
  });
  console.log(3);
});
console.log(4);

// Logs:
// 4
// 3
// 2
// 1

 

 

ES2015부터는 콜백 지옥을 극복하기 위해 프로미스(promise)개념을 도입하였습니다.

const page1Promise = fetch(url1)

page1Promise
  .then(response1 => {
    return fetch(url2)
  })
  .then(response2 => {
    return fetch(url3)
  })
  .then(response3 => {
    // ...
  })
  .catch(error => {
    // ...
  })

 

ES2017에서는 async 와 await 키워드를 도입하여 더욱 간단하게 처리가 가능하게 되었습니다.

async function fetchPages() {
  const response1 = await fetch(url1)
  const response2 = await fetch(url2)
  const response3 = await fetch(url3)
  // ...
}

 

await 키워드는 각각의 프로미스가 처리(resolve)될 때까지 함수의 실행을 멈춥니다. async 함수 내에서 await 중인 프로미스가 거절(reject)되면 예외를 던집니다. 이는 try/catch 구문을 사용하여 핸들링 할 수 있습니다.

async function fetchPages() {
  try {
    const response1 = await fetch(url1)
    const response2 = await fetch(url2)
    const response3 = await fetch(url3)
    // ...
  } catch (e) {
    // 에러 핸들링
    console.log(e)
  }
}

 

병렬로 사용하고 싶다면 Promise.all 을 사용하자

async function fetchPages(){
	const [response1,response2,response3] = await Promise.all([
    	fetch(url1),fetch(url2),fetch(url3),
    ])
    // do something...
}

 

요약 

• 콜백보다는 프로미스를 사용하는게 타입 추론에 유리합니다.
• 프로미스를 생성하기보단 async 와 await 를 사용하는것이 좋다.
• 어떤 함수가 프로미스를 반환한다면 async로 선언하는 것이 좋다.