# Promise

📌 Promise란 무엇인가?

성공/실패 판정 기계다.

(성공하면 then(), 실패하면 catch()를 실행)

⭐️ 콜백함수 디자인 패턴이 마음에 안들시 대신 사용할 수 있음.

새로운 기능이라기보다는 코드/함수 디자인 패턴일 뿐이다.
ajax 요청, setTimeout, 이벤트리스너 등을 사용할 때 씀.

기본 형태

var 프로미스 =  new Promise();

프로미스.then(function(){
})

콜백함수에 비해 좋은 점

1. 코드가 옆으로 길어지지 않아서 보기 좋음
2. 성공/실패의 경우에 맞춰 각각 다른 코드 실행 가능(then, catch)

성공(resolve), 실패(resolve) 판정 디자인

var 프로미스 =  new Promise(function(resolve,reject){
	resolve(); // 성공 판정 내림 -> then 실행됨
	reject(); // 실패 판정 내림 -> catch 실행됨
});

프로미스.then(function(){
}).catch(function(){
})

예제

어려운 연산이 끝나면 특정 코드 실행하기

var 프로미스 =  new Promise(function(resolve,reject){
	var 어려운 연산 = 1 + 1; // 1. 연산을 먼저 하고
	resolve(); // 2. then 코드 실행
});

프로미스.then(function(){
	console.log('성공했어요') // 출력
}).catch(function(){
	console.log('실패했어요')
})

성공/실패시 데이터 전달하기

• 파라미터로 값을 넘겨주면 된다.

var 프로미스 =  new Promise(function(resolve,reject){
	var 어려운 연산 = 1 + 1; 
	resolve(어려운 연산); // 파라미터로 값 넘김
});

프로미스.then(function(결과){
	console.log(결과) // 2 출력
}).catch(function(){
	console.log('실패했어요')
})

1초 후에 성공 판정하고 특정 코드 실행하기

var 프로미스 =  new Promise(function(resolve,reject){
	setTimeout(function(){
    	resolve();
	},1000);
});

프로미스.then(function(){
	console.log('성공했어요') // 1초 후 출력됨.
}).catch(function(){
	console.log('실패했어요')
})

promise의 3가지 상태

1. 성공 : resolved
2. 실패 : rejected
3. 판정 대기중 : pending

promise에 대한 오해

동기식 처리를 비동기적 처리로 만들어준다?

: 비동기랑 상관없음! 그냥 코딩 스타일임.

Promise가 적용된 곳들

1. jQuery.ajax()
2. fetch() -> promise를 return함.
   활용 : fetch().then().catch()