jquery promise 사용하기

안녕하세요.

너무 현실에 안주하였다는 사실을 깨달았습니다.

promise를 듣고 너무 생소하여 찾아봤더니..

현재 상당히 많이 사용하고 있어 더욱더 놀랬습니다.

promise와 관련된 더욱 깊이있는 개념과 내용들은 다른 블로그를 참조하세요.

저는 단지 ajax에서 콜백 호출시 콜백 지옥을 탈출하는 예시만 보여드리겠습니다.

javascript, jquery 등에서 ajax 통신방법은 상당히 자주 사용합니다.

하지만 ajax를 사용한후 다시 ajax를 사용할땐 어떻게 할까요?

첫번째 ajax의 성공여부를 확인한 뒤에

두번째 ajax를 실행시켜야 할 것입니다.

다음은 잘못된 예시 입니다.

$.ajax({

url: '/xx/xxx/ajaxTest',

data: 'num=10',

type: 'post',

dataType: 'json',

error: function(){

alert('요청하신 페이지에 문제가 있어 표시할 수 없습니다.');

},

success: function(json){

// work

}

$.ajax({

url: '/xx/xxx/ajaxTest2',

data: 'num=10',

type: 'post',

dataType: 'json',

error: function(){

alert('요청하신 페이지에 문제가 있어 표시할 수 없습니다.');

},

success: function(json){

// work

}

이렇게 연속적으로 ajax를 쓰면 실행순서가 엉망이 됩니다.

이유는 바로 비동기이기 때문입니다.

즉, 순서대로 실행되지 않습니다.

그래서 콜백의 개념을 사용하여 

success 이후에 다시 ajax를 호출해야 합니다.

다음의 코드는 실재 제가 사용하고 있던 코드 입니다.

사용자의 정보를 서버로부터 받아 

그 데이터를 통해 무언가를 하고자 하는 경우였습니다.

$.ajax({
			url: '/sm/util/ajaxTest',
			data: 'num=10',
			type: 'post',
			dataType: 'json',
			error: function(){
				alert('요청하신 페이지에 문제가 있어 표시할 수 없습니다.');
			},
			success: function(json){
				console.log('첫번째');
					$.ajax({
						url: '/sm/util/ajaxTest',
						data: 'num=20',
						type: 'post',
						dataType: 'json',
						error: function(){
							alert('요청하신 페이지에 문제가 있어 표시할 수 없습니다.');
						},
						success: function(json){
							console.log('두번째');
							$.ajax({
								url: '/sm/util/ajaxTest',
								data: 'num=30',
								type: 'post',
								dataType: 'json',
								error: function(){
									alert('요청하신 페이지에 문제가 있어 표시할 수 없습니다.');
								},
								success: function(json){
									console.log('num 30이 아닐때 ajax 처리');
								}
							}); 
						}
					}); 
				}
		}); 

ajax 3개를 활용하고자 하면... 벌써부터 코드가 보기 싫어집니다.

이제 Promise를 적용 시켜보겠습니다.

Promise란

자바스크립트 비동기처리에 사용되는 객체 입니다.

기본 골격입니다.

function promise_function2(param){

  return new Promise(function(resolve, reject){ 

    //할일

  });

}

resolve는 성공시, 

reject는 실패시 활용되는 파라미터 입니다.

이제 제가 사용한 promise 입니다.

function promise_function(){
	  return new Promise(function(resolve, reject){ 
		  $.ajax({
				url: '/sm/util/ajaxTest',
				data: 'num=10',
				type: 'post',
				dataType: 'json',
				success : function(result){
				        var num = result.num;
				        resolve(num);
				       
				      }
			});  
	  });
	}
	 
function firstAjax(num){
	  return new Promise(function(resolve, reject){
		  alert('첫번째 실행');
		  $.ajax({
				url: '/sm/util/ajaxTest',
				data: 'num=20',
				type: 'post',
				dataType: 'json',
				success : function(result){
				        var num = result.num;
				        resolve(num);
				        
				      }
			}); 
	  });

	}

function secondAjax(num){
	  return new Promise(function(resolve, reject){
		  alert('두번째 실행');
		  $.ajax({
				url: '/sm/util/ajaxTest',
				data: 'num=20',
				type: 'post',
				dataType: 'json',
				success : function(result){
				        var num = result.num;
				        resolve();
				        
				      }
			}); 
	  });

	}

	
function successFunction(){
	alert('성공');
	return false;
}
function errorFunction(){
	  alert('에러');
	  return false;
	}
	
promise_function()
.then(firstAjax)
.then(secondAjax)
.then(successFunction)
.catch(errorFunction);

저는 이렇게 적용 하였습니다.

ajax를 활용한 로직은 Pomise 객체를 통해 함수로 만들었습니다.

그리고 그다음에 실행될 ajax를 포함한 함수는

.then()을 통해 호출하였습니다.

.then()은 Promise가 성공적으로 이루어진 다음 다른 작업을 실시합니다.

.catch()는 말그대로 에러 및 예외상황이 발생했을때 이루어지는 작업을 실시합니다.

소스를 보면 일단 가독성이 상당히 좋아졌습니다.

일단 저는 이정도로 이해하고 넘어가도록 하겠습니다.

댓글 남겨주시면 제가 아는 범위내에 성실히 답변드리겠습니다.

감사합니다.