[jQuery] 동기 / 비동기 promise

Promise

• promise는 자바스크립트 비동기 처리에 사용되는 객체
• 자바스크립트의 비동기 처리란 ‘특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트의 특성’을 의미
•  Promise() 생성자 - new Promise(executor);
• 전달되는 함수 executor(실행자, 실행함수)
• 인자로 resolve와 reject함수를 받음 하나는 반드시 호출
  • resolve - 기능을 정상적으로 수행해서 마지막에 데이터를 전달한다.then() 으로 결과를 받는다.
  • reject - 중간에 문제가 생기면 호출된다. .catch()로 결과를 받는다
• [let promise = | return] new Promise(function(resolve, reject){ })

<script>
function getData() {
	return new Promise(function (resolve, reject) {
	resolve('hi');
	reject(new Error("Request is failed"));
	});
}

vpromi = getData(); // promise를 리턴받고
	// then함수의 콜백함수의 인자로 resolve의 결과를 받는다
    
vpromi.then(function (result) {
	console.log(result); 
}

// 변수값에 넣지않고 직접 작성할 수도 있다
getData()
.then(function (result) { 
	console.log(result); 
}
.catch(function(err) {
	console.log(err); // Error: Request is failed
}
</script>

Promise상태

pending (대기)

호출이 되지 않았을 때의 상태

<script>
const promise = new Promise((resolve, reject) => {
	setTimeout(function(){
		const data = { name : "오리"};
		console.log('요청 성공');
	},1000);
})

console.log(promise); 
/*resolve와 reject가 호출안되었기 때문에 대기 상태 
> state : "pending" , result : "undefind" */
</script>

fulfillied (성공) / reject(실패)

<script>

//resolve()를 호출하혀 성공상태가 되도록 처리
const promise = new Promise((resolve, reject) => {
	setTimeout(function(){
// 		const data = { name : "오리"};
		const data = null;
		if(data==null){
			reject(new Error("데이터 가져오기 실패"));
		}else{
			console.log('요청 성공');
			resolve(data);
		}
	},1000);
})

promise
.then(function(result){
	console.log(result.name); // 오리
	console.log(promise);
	/* resolve()를 호출했을 때,
	state : fulfillied , result : Object(name속성이 포함된) */
})
.catch(function(err){
	console.log(err);
	console.log(promise);
	/* reject()를 호출했을 때,
	state : rejected , result : Error: rror: 데이터 가져오기 실패 at ( 주소 ) */
})
</script>

Promise 예제

<script>
function getData(){
	const promi = new Promise((resolve, reject)=>{
		setTimeout(function(){
// 			const data = {name : "거위"}
			const data = null;
		if(data){ // 데이터가 있으면 true
			console.log("데이터 가져오기 성공");
			resolve(data);
		}else{
			reject(new Error("데이터 가져오기 실패"));
		}
		},1000)
	})
	return promi;
}

const promi = getData();

// resolve함수 호출시 data를 넘겨서 promi의 then()함수의 콜백함수에서 받음
promi
.then(function(data){
	console.log(data.name);
})
// reject함수 호출시 err를 넘겨서 promi의 catch()함수의 콜백함수에서 받음
.catch(function(err){
	console.log(err);
})
.finally(function(){
	console.log('성공 실패 모두 실행되는 마무리 작업')
})
</script>

 여러 프로미스 연결 (다중 콜백)

then()함수의 콜백 함수 내의 문장이 한 문장이라면 자동으로 return된다

<script>
function getData(){
	const promi = new Promise((resolve, reject)=>{
		setTimeout(function(){
			const data = {name : "거위"}
// 			const data = null;
		if(data){ // 데이터가 있으면 true
			console.log("데이터 가져오기 성공");
			resolve(data);
			}else{
			reject(new Error("데이터 가져오기 실패"));
			}
		},1000)
	})
	return promi;
}

// 여러번 반복적으로 실행 (콜백지옥 해결방법)
/* getData()
.then(function(data){
	console.log(data.name);
	return getData();
})
.then(function(data){
	console.log(data.name);
	return getData();
})
.then(function(data){
	console.log(data.name);
	return getData();
})
.catch(function(err){
	console.log(err);
})
.finally(function(){
	console.log('마무리 작업')
}) */

// then()함수의 콜백 함수 내의 문장이 한 문장이라면 자동으로 return된다
// 간단하게 표현 가능
getData()
.then((data) => getData())
.then((data) => getData())
.then((data) => console.log(data))
.catch((err) =>console.log(err))
.finally(()=> console.log('마무리 작업'));

//콜백 함수로 호출 (callback hell)
/* getData((data)=>{
	getData((data)=>{
		getData(data)=>{
			...
		})
	})
}) */
</script>