메리

내가 순서대로 동기처리하고 싶었던 코드

ajax1
code1
code2
ajax2
code3

위의 로직이 이처럼 순차적으로 처리되길 바랐음...

promise를 사용하여 아래와 같이 짜보았다.

//promise 생성 시 resolve, reject 콜백함수를 인자로 넘김.
//작업 성공 시 resolve를, 실패 시 reject를 호출하면 됨.
let func1 = new Promise((resolve,reject)=>{ 
	ajax1
	ajax1 성공 시 resolve(); 호출하고 code1
});

//promise 결과를 사용하기.
//promise.then은 콜백이 resolve()인 경우에,
//promise.catch는 reject()인 경우에 실행하게된다.
func1.then({
	code2
	ajax2
	ajax2 성공 시 code3
}).catch({})

아래는 사용한 코드 예시임.

let func1 = new Promise((resolve,reject)=>{ //new Promise() 메서드로 생성되면 대기(pending) 상태                           
	$.ajax({
		url: "/api/test/get1",
		type: "get",
		async : false, //동기처리방식. 응답 완료 후 다음 로직 실행
		data: $('#data').val(),
		success: function (param) {
			let data = param.data;
			console.log("code1");
			resolve(data); //성공 시 resolve 콜백으로 리턴 값을 보내면 이행(fulfilled)상태
		},
		error : function(){                      
			reject(); //이행실패시 reject 콜백.
		}
	});
});

func1.then(function(data){ //promise.then : promise의 resolve 를 받는다.
	console.log("code2");
	$.ajax({
		url: "/api/test/get2",
		type: "get",
		async : false,
		success: function (param) {
        	console.log("code3");
 		}
	});
}).catch({console.log("실패"!)}); //catch : promise의 reject 를 받는다.