[JavaScript] Promise 또는 Async/Await로 비동기 작업 관리하기

자바 스크립트에서는 비동기적인 프로그램을 실행할 수 있는 기능이 있습니다.

Promise 및 Async/Await으로 비동기 프로그램을 제어해 봅시다.

setTimeout

• 작업을 예약
• 비동기로 동작
• 동시에 여러 작업이 가능함. 흐름이 예측 불가함
• 시간이 걸리지만 기다리기만 하면 되는 작업
• ajax (XMLHtmlRequest 객체를 사용함)
• Fetch API
• Node.js (모든 것이 비동기)

비동기 작업의 사용성 문제

• 콜백 지옥

Promise

• 비동기 작업 단위
• 비동기 작업들을 관리
• 내용은 실행되었지만 결과를 아직 반환하지 않은 객체
• 3가지 상태 (pending / fulfilled / rejected )
• New Promise()를 하는 순간 할당된 비동기 작업이 시작됨 (일단 배를 떠나보냄)
• Promise가 끝나고 난 다음 동작을 설정할 수 있는 것이 then, catch 메서드
• Then : Promise가 성공했을 때의 동작, 인자로 함수를 받음
• Catch : Promise가 실패했을 때의 동작, 인자로 함수를 받음
• 위 메서드들은 체인형태로 활용할 수 있음

 Async / Await

• 에러 핸들링 기능이 없음 -> try-catch() 사용하기

에러 핸들링

• Promise : .catch()로 에러 핸들링 가능
• Async/await : 에러 핸들링이 없어서 try-catch() 사용

코드 가독성

• Promise : .then()으로 콜백 지옥
• Async/await : 코드가 길어질수록 가독성이 좋음, 비동기 코드가 동기 코드처럼 읽히게 해주어 흐름 파악이 쉽다.