안녕하세요
오늘은 자바스크립트 Promise에 대해 공부해보겠습니다
Promise를 살펴보기전에 먼저 동기와 비동기에 대해서 알아야하는데요
동기(Synchronous)
동기는 한 작업이 실행되면 그 작업이 끝날 때까지 다른 작업들은 실행되지 않고 자신의 순서가 될 때까지 기다리는 것을 말합니다
이것을 순차적, 절차적이라고 저는 표현하는데요
먼저 진행중인 작업이 끝나야 다음 작업이 수행되기 때문입니다
실생활에서 예로 들면
은행을 갔는데 은행창구가 한 곳만 열려있고 은행에 업무를 보러온 사람이 13명이라면, 1번부터~13번까지 한 창구에서 차례대로 업무를 보게되겠죠?
비동기(Asynchronous)
비동기는 동기와 다르게 한 작업이 실행되면 그 작업이 끝날 때까지 기다리는 것이 아니라, 응답에 상관없이 다음 작업이 실행되는 것을 말합니다.
이것을 비순차적, 병렬적이라고 저는 표현합니다
먼저 진행중인 작업의 완료 유무 상관없이 다음 작업이 수행되기 때문인데요
동기에서 든 예시로 들면
은행창구가 여러 곳이 열려있어 은행 업무를 보는 13명의 사람들이 열려있는 은행 창구만큼 분산되어 작업이 이루어진다고 보면 될 것 같습니다
그래서 Promise랑 그게 무슨 상관인데!
컨텐츠를 보기 위해서 웹 페이지의 로딩이 끝날 때까지 기다리거나, 특정 이벤트를 발생시켰을 때 긴 시간이 걸린다면 화면이 정상적으로 노출되지 않고 무한 대기에 빠지겠죠?
요즘 우리들이 느리고 응답없는 웹 서비스를 사용한다고 하면 바로 그 서비스는 버려질 거예요
따라서 웹 서비스를 비동기적으로 동작해야 사람들을 해당 서비스에 유지시킬 수 있을건데요
Promise 가 바로 비동기 처리에 사용되는 객체입니다!
Promise
Promise 는 비동기 프로그래밍을 할 수 있게 해주며
1. Pending(대기) ->
2. Resolve(해결)/Reject(거부) ->
3. Fulfilled(성공)/Rejected(실패)
순으로 진행됩니다
resolve(value) 같은 경우에는 작업이 성공적으로 마무리되면 호출되는 메소드이며, 결과값은 value에 담깁니다
reject(error) 는 작업이 실패 시 호출되며, 에러 메시지는 error에 담깁니다
const promise = new Promise((resolve, reject) => {
const num = 2;
if(num === 2) {
resolve("success");
} else {
reject("fail");
}
})
promise()
.then((result) => {
console.log("성공 시 then으로 들어와서 진행 :: result 값은 success");
}).catch(() => {
console.log("실패 시 catch로 들어와서 진행 :: result 값은 fail");
});Promise Chaining
비동기 함수의 Result를 통해서 또 다른 비동기 함수를 사용해야하는 경우, 함수 호출이 계속해서 중첩되어 무수히 많은 콜백 함수가 발생할 수 있습니다
이를 콜백 지옥에 빠진다! 라고 표현하는데요
Promise Chaining 은 후속 처리 메소드를 묶어 (chaining) Promise를 리턴하는 비동기 함수들을 연결시킬 수 있습니다
fetch(url)
.then((res) => {
return res.json(); // 반환하는 res.json()이 Promise 객체
}).then((json) => { // 위에서 전달받은 Promise 객체
doSomething();
}).catch((error) => {
// Error 상황 처리
});이렇게 이번 포스팅에선 Promise에 대해 알아보았습니다
더 자세한 내용이 궁금하시다면 언제든 구글링을 통해 검색해보시길 바랍니다
감사합니다
