자바스크립트에서 Promise는 피할 수 없는 개념 중 하나 이다.
모든 비동기 통신을 할 때 Promise를 사용해서 적용 하기 때문에 다시 한번 정리해본다.
기본적으로 동기와 비동기의 차이점을 알아야 한다.
[동기/비동기]
‘동기적’ 이라는 말이 무슨 뜻일까?
출처:https://velog.io/@chjh121/동기와-비동기의-차이
동기와 비동기의 차이점은 순차적으로 실행 되냐? 아니면 불규칙 적으로 실행 되냐? 의 차이다.
그림을 보면 알겠지만,동기적 으로 동작한다면 하나의 작업이 끝날 때 까지 계속 기다리고 있다.
하지만 비동기는 다르다. 비동기 그림을 보면 중간에 어떠한 작업을 요청 한 후, 나머지 작업들을 계속 하고 있다가 작업이 완료 된다면 완료된 작업을 돌려받는다. 물 흐르듯 자연스럽게 작업이 진행 되는 것이다.
만약에 웹사이트에 비교해보자.
네이버 에서 강아지에 대한 검색을 한다고 했을 때 강아지에 대한 데이터가 너무 방대해서 대략 1분 가량의 시간이 걸린다고 가정해보자.
만약에 동기적으로 동작한다면 강아지를 검색하고 1분 동안 사용자는 아무런 작업을 하지 못할 것이다. 하지만 그러한 부분을 비동기적으로 동작하게 한다면?
1분동안 강아지라는 정보를 가져오는 동안 사용자는 다른 여러가지 것들을 사용 할 수 있다. 이런 차이가 존재 하는 것이다.
주로 통신에 관련된 부분도 비동기로 많이 작업한다.
만약에 인터넷 상태가 이상하거나 그럴 때 검색결과를 불러오는데 있어서 정말 오랜 시간이 걸릴 것이다. 비동기적으로 통신을 하지 않으면 인터넷 상태가 이상할 때 사용자는 엄청나게 오랜 기다림이 있을 것이고, 사이트가 이상하다 라는 생각을 하게 될 것이다.
[Promise 란?]
프로미스란? 언젠가 사용하게 될 값을 생산해내는 객체이다. (ES6에 추가된 친구이다.)
- 값을 얻는다(resolved) or 값을 얻지 못했지만 이유를 얻게 된다(rejected)
프로미스는 3가지 상태 중 하나를 갖게 되는데 아래와 같다.
- 대기(pending): 이행하거나 거부되지 않은 초기 상태.
- 이행(fulfilled): 연산이 성공적으로 완료됨.
- 거부(rejected): 연산이 실패함.
세가지 상태에 따라서 비동기 동작을 할 때 준비,성공,실패 여부를 확인 할 수 있다.
function promise() {
return new Promise((resolve, reject) => {
$.get(`https://jsonplaceholder.typicode.com/todos/1`, function (res) {
if (res) {
resolve(res);
} else {
reject(error);
}
});
});
}
promise()
.then(res => {
console.log("res", res);
})
.catch(error => {
console.log("error", error);
});자 코드를 한번 확인 해 보자.
프로미스는 말 그대로 약속이다. 언젠가 사용하게 될 값을 생성 해 두는 것이다.
저 promise() 함수 안을 살펴보자. 어떤 URL이 있고 ajax로 불러와서 불러온 값을 res로 해서 만약에 res 가 있다면 resolve 하고 아니면 error를 가진 reject를 한다.
promise() 함수를 실행하고 .then을 하게 된다면 resolve 된 값을 보여주고, reject이 된다면 .catch 구문을 탄다.
즉 정말 쉽게 생각해서 프로미스는 언젠가 사용 하게 될 값을 미리 생성 해 두고, .then 이나 .catch 를 사용해서 사용될 값에 대한 성공 실패 여부를 통해 비동기를 실행 할 수 있는 것이다.
