안녕하세요 오늘은 BESPIN GLOBAL Innovate AI실 구동민님이 작성해주신 ‘Promise 로 비동기 프로그래밍을 다뤄보자’에 대해 소개해드리도록 하겠습니다.
목차
- 들어가며
- Promise란
- Promise 사용의 장점
- ajax 함수에 Promise 활용
- 마무리하며
1. 들어가며
오늘은 JavaScript의 비동기 처리를 하며 알게 된 Promise에 대해 알아보겠습니다.
2. Promise란
Promise는 서버에서 받아온 데이터를 화면에 뿌려줄 때 사용됩니다. 애플리케이션을 구현할 때 서버에 요청한 데이터를 받아오기 위해 API를 사용합니다. API를 호출하고 데이터를 받아오기 전에 화면에 데이터를 표시하게 되면 오류가 발생합니다. 이를 해결하기 위한 방법 중 하나가 Promise입니다.
Promise는 비동기 작업의 완료 여부에 따라 대기, 이행, 거부 3가지 상태를 가집니다.
위의 코드와 같이 new Promise를 사용해 Promise 객체를 생성합니다.
작업이 성공하면 ➡️resolve를 호출해 데이터를 전달하고, 실패시 reject를 호출해 실패 원인을 전달합니다.
then 메소드를 사용해 성공과 실패에 대한 콜백 함수를 등록할 수 있습니다.
- Pending 상태
✅new Promise() 를 호출하면 대기 상태가 됩니다. 해당 메서드를 호출할때 콜백 함수를 선언할 수 있고 콜백 함수의 인자는 resolve, reject가 됩니다.
- Fulfilled
✅resolve를 다음과 같이 실행하면 이행 상태가 됩니다.
✅이행 상태가 되면 then()을 이용해 결과 값을 받을 수 있습니다.
- Rejected
✅reject()를 호출하면 실패상태가 되고, 실패한 이유를 catch()로 받을 수 있습니다.
3. Promise 사용의 장점
Promise의 장점은 다음과 같습니다.
✅가독성 및 유지 보수 향상 : 비동기 코드를 순차적으로 작성해 가독성이 향상되고, 유지보수가 용이해집니다.
✅Callback hell 회피 : 여러 단계로 중첩된 콜백 함수를 피하고, 코드를 단순하게 작성할 수 있습니다.
✅비동기 제어 흐름 관리 : 여러개의 비동기 작업을 순차적 혹은 병렬로 실행하고 작업 완료 여부 관리 가능
4. ajax 함수에 Promise 활용
아래는 간단한 ajax API의 콜백 함수를 사용해 데이터를 받아오는 코드입니다.
ajax 코드에 Promise를 적용하면 다음과 같이 작성할 수 있습니다.
5. 마무리하며
Promise는 Javascript에서 비동기 작업을 효과적으로 다룰 수 있는 객체입니다. Promise 사용을 통해 중첩된 비동기 작업을 효괒거으로 조율해 효율적인 코드를 작성할 수 있으면 좋겠습니다.
여기까지 ‘Promise 로 비동기 프로그래밍을 다뤄보자’에 대해 소개해드렸습니다. 유익한 정보가 되셨길 바랍니다. 감사합니다.
Written by 구 동민 / Innovate AI실
BESPIN GLOBAL