[JavaScript] Callback vs Promise vs async-await

promise는 이제 진짜 알 때도 되었다. #가보자고...

 

✅ Callback

코드 출처 : https://librewiki.net/wiki/%EC%BD%9C%EB%B0%B1_%EC%A7%80%EC%98%A5

• 콜백 지옥 = 콜백이 너무 길어지면 읽기 힘들고, 이해하기도 힘듬
• 에러처리하기도 힘듬
• 유지보수도 힘듬
• 그리고 실패했는지/성공했는지/대기중인지 알려주지 않음 (에러가 나야만 아 뭔가 잘못됐구나 라고 알수있음😰)

→ 그래서 promise가 등장

 

✅ Promise 

• promise는 객체임
• new Promise()로 프로미스를 생성하고 종료할 때 까지 프로미스는 3가지 상태를 가짐
  • pending(대기) : 비동기처리 미완료 (생성 직후 === 기본상태)
  • fulfilled(이행) : 비동기 처리 성공 → resolve 호출
  • rejected(실패) : 비동기 처리 실패 → reject 호출
• Promise 후속 처리 메서드
  • then : 인자를 2개 받을 수 있음 (1번째 = 성공 시 호출, 2번째 = 실패 시 호출) → promise 객체 return
  • catch : 실패했을 때에만 호출 됨, then의 2번재 인자와 같은 역할을 함 → promise 객체 return
  • finally : 성공/실패 여부와 상관 없이 무조건 딱!! 한번만!! 호출됨

 

✅ async-await

promise를 조금 더 좋게 만듬!

// promise 연속 호출
function getData() {
    return promise1()
        .then(response => {
            return response;
        })
        .then(response2 => {
            return response2;
        })
        .catch(err => {
            //TODO: error handling
            // 에러가 어디서 발생했는지 알기 어렵다.
        });
}

// async await 연속 호출
async function getData() {
    const response = await promise1();
    const response2 = await promise2(response);
    return response2;
}

코드 출처 : https://ithub.tistory.com/223

• 코드가 비교적 간결하고, 가독성이 높아짐
• 응답 데이터로 들어오는 변수(주로 res, response, data 등등으로 쓰이는 애들)를 없앨 수 있다
• try-catch로 에러를 핸들링함
• error가 어디서 발생했는지 알기 쉬움 

 

 

👀참고 (감사합니다)

 https://youtu.be/JB_yU6Oe2eE

 

https://ithub.tistory.com/223

async/await이 promise보다 좋은 이유

 

https://velog.io/@pilyeooong/Promise%EC%99%80-asyncawait-%EC%B0%A8%EC%9D%B4%EC%A0%90

Promise와 async/await 차이점

 

https://spicycookie.me/JavaScript/promise/