Javascript - Promise 이해하기

06 Oct 2021 in Frontend / Scripts on Promise, Javascript

• 1. 목적
• 2. 내용
• 3. promise 의 상태

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise

1. 목적

• 서버에서 데이터를 가져와 보여주거나 할 때, 비동기 처리를 하기 위한 메소드

2. 내용

• 기본구조

test : function () {
  return new Promise( function(resolve, reject) {
      $.get('request_url', function(data) {
          resolve(data);// 리턴받은 데이터를 resolve와 함께 호출.
      });
  });
}

test().then( function(data) {
	console.log(data); // then 으로 받은 데이터를 가지고 작업
});

위와 같은 기본 형태를 가지며, resolve를 통해 then 으로 이어지는 이후 작업을 실행한다.

3. promise 의 상태

1. Pending(대기) : 비동기 처리 로직이 아직 완료되지 않은 상태

new Promise(); // 함수 선언 시, 상태.

1. Fulfilled(이행) : 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태

return new Promise(function (resolve, reject) {
  resolve(); //resolve 를 호출한 상태.
});

1. Rejected(실패) : 비동기 처리가 실패하거나 오류가 발생한 상태

test: function () {
  return new Promise( function ( resolve, reject ) {
      reject(new Error("error!"));
  });
}

test().then().catch(function(err) {
  console.log(err); // error! 서버 요청 실패 시, 에러발생은 reject 를 호출하여 catch 로 받아 표현한다.
});

1. 추가 내용

• then 으로 계속 이어서 처리를 진행할 수 있다.

test : function () {
	return new Promise ( function(resolve, reject) {
		$.get('request_url', function(response) {
			if (response) {
				resolve(response);
			}
			reject(new Error("error!"));
		});
    });
}

test().then( function ( data ) {
	console.log(data); // 1
    return data + 1; // 2
}).then ( function ( data ) {
	console.log(data); // 2
    return data + 1; // 3
});