Async/Await와 Promise의 차이

Async/Await와 Promise의 차이에 대해 설명해주세요.

에러 핸들링

Promise 를 활용할 시에는 .catch() 문을 통해 에러 핸들링이 가능하지만, async/await 은 에러 핸들링 할 수 있는 기능이 없어 try-catch() 문을 활용해야 한다.

코드 가독성

코드가 길어지면 길어질수록, async/await 를 활용한 코드가 가독성이 좋다.
Promise는 .then()이 반복되는 지옥의 코드 모양이 될 가능성이 있다.
async/await 은 비동기 코드가 동기 코드처럼 읽히게 해주어 코드 흐름을 이해 하기 쉽다.

async는 에러 위치를 찾기 쉽다.

만약 Promise를 연속으로 호출한다고 해보자.
이때 에러가 발생하면 어떤 then에서 에러가 발생했는지 찾기가 어렵다.
하지만 async를 사용하게 되면, 어떤 지점에서 에러가 발생했는지 쉽게 찾을 수 있다.

function sample() {
  return sampleFunc()
    .then(data => return data)
    .then(data2 => return data2)
    .then(data3 => return data3)
    .catch(err => console.log(err))  // 결과적으로 문제가 발생했다
}

async function sample() {
  const data1 = await sampleFunc();      // 문제 발생시 data1값이 유효치 않음
  const data2 = await sampleFunc2(data1);
  return data2;
}

이처럼 promise, async/await는 용도는 같지만, 간결성, 에러 핸들링, 에러 위치 확인 측면에서 차이가 있다.
이외에도 async/await은 디버그를 할 때 then과 달리 정확한 위치를 지정할 수 있는 장점이 있다.