비동기식 (Asynchronous) - promise 이란?

 

콜백지옥을 벗어나기 위해 

promise를 사용하는데

 

promise가 무엇인지 더 자세히 알아보기로 마음먹었다.

 

 

---

 

💖 Promise

 

“A promise is an object that may produce a single value some time in the future”

 

 

- 프로미스는 자바스크립트 비동기 처리에 사용되는 객체입니다. 여기서 자바스크립트의 비동기 처리란 ‘특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트의 특성’을 의미합니다. 

 

 

 

https://tlsdnjs12.tistory.com/12

동기식 (Synchronous) / 비동기식 (Asynchronous) 이란?

 

 

 

---

 

📑 Promise가 필요한 이유

 

- 프로미스는 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용합니다. 일반적으로 웹 애플리케이션을 구현할 때 서버에서 데이터를 요청하고 받아오기 위해 아래와 같은 API를 사용합니다.

 

$.get('url 주소/products/1', function(response) {
  // ...
});

 

위 API가 실행되면 서버에다가 ‘데이터 하나 보내주세요’ 라는 데이터 요청을 보내죠. 그런데 여기서 데이터를 받아오기도 전에 마치 데이터를 다 받아온 것 마냥 화면에 데이터를 표시하려고 하면 오류가 발생하거나 빈 화면이 뜹니다. 이와 같은 문제점을 해결하기 위한 방법 중 하나가 프로미스입니다.

 

 

 

 

---

👏 promise 기본문법

 

const promise1 = new Promise((resolve, reject) => {
  // 비동기 작업
});

 

promise1
  .then(() => {
    console.log("then!");
  })
  .catch(() => {
    console.log("catch!");
  });

 

💬 then 메소드는 해당 Promise 가 성공했을 때의 동작을 지정합니다. 인자로 함수를 받습니다.

💬 catch 메소드는 해당 Promise 가 실패했을 때의 동작을 지정합니다. 인자로 함수를 받습니다.

 

 

 

 

---

 

💻 Promise 기초

 

//Promise 선언
var _promise = function (param) {
	return new Promise(function (resolve, reject) {
		// 비동기를 표현하기 위해 setTimeout 함수를 사용 
		window.setTimeout(function () {
			// 파라메터가 참이면, 
			if (param) {
				resolve("해결 완료"); // 해결됨 
			}
			// 파라메터가 거짓이면, 
			else {
				reject(Error("실패!!")); // 실패 
			}
		}, 3000);
	});
};

//Promise 실행
_promise(true)
.then(function (text) {
	console.log(text); // 성공시
}, function (error) {
	console.error(error); // 실패시 
});

 

실행한 결과는 console.log에 "해결 완료"가 뜨는 것을 볼 수 있습니다.

몇 줄 되지 않지만, promise의 기초에 대해서 가장 명확하게 이해할 수 있는 코드입니다.

 

 

 

 

---

 

🔊 Promise 선언부

 

promise는 말 그대로 "약속"이다. "지금은 없으니까 이따가 줄게~" 라는 약속이다. 더 정확히 "지금은 없는데 이상없으면 이따가 주고 없으면 알려줄게~" 라는 약속이다.

 

따라서 promise는 다음 중 하나의 상태(state)가 될 것이다.

 

 

---

✨Promise의 상태

 

Promise 처리 흐름 [출처] MDN web docs

 

💬 pending : 아직 약속을 수행 중인 상태(fulfiled 혹은 reject가 되기 전)이다.

💬 fulfilled : 약속(promise)이 지켜진 상태이다.

💬 rejected : 약속(promise)가 어떤 이유에서 못 지켜진 상태이다.

💬 settled : 약속이 지켜졌든 안지켜졌든 일단 결론이 난 상태이다.

 

 

 

---

 

 

 

//Promise 선언
var _promise = function (param) {
	return new Promise(function (resolve, reject) {
		// 비동기를 표현하기 위해 setTimeout 함수를 사용 
		window.setTimeout(function () {
			// 파라메터가 참이면, 
			if (param) {
				resolve("해결 완료"); // 해결됨 
			}
			// 파라메터가 거짓이면, 
			else {
				reject(Error("실패!!")); // 실패 
			}
		}, 3000);
	});
};

 

위의보면, 나중에 Promise 객체를 생성하기 위해 Promise 객체를 리턴하도록 함수로 감싸고 있다.

Promise 객체만 보면 파라메터로 익명함수를 담고 있고, 익명 함수는 resolve 와 reject를 파라메터로 받고 있다.

 

1. new Promise 로 Promise 가 생성되는 직후부터 resolve 나 reject 가 호출되기 전까지의 순간을 pending 상태라고 볼 수 있다.

 

2. 이후 비동기 작업이 마친뒤 결과물을 약속대로 잘 줄 수 있다면 첫번째 파라메터로 주입되는 resolve(성공) 함수를 호출하고, 실패했다면 두번째 파라메터로 주입되는 reject(실패) 함수를 호출한다는 것이 promise의 주요 개념(!)이다.

 

위의 예제에서는 비동기 작업을 시뮬레이션하기 위해 setTimeout 함수를 사용했다.

 

 

 

---

 

🔊 Promise 실행부

 

//Promise 실행
_promise(true)
.then(function (text) {
	console.log(text); // 성공시
}, function (error) {
	console.error(error); // 실패시 
});

 

1. _promise() 를 호출하면 Promise 객체가 리턴된다.

 

2. Promise 객체에는 정상적으로 비동기작업이 완료되었을 때 호출하는 then 이라는 API가 존재한다. 위의 예제는 하나의(!) then API를 호출해서 비동기 작업이 완료되면 결과에 따라 성공 혹은 실패 메시지를 콘솔로그로 찍어주게 된다. 

 

앞서 선언부에서 Promise 객체를 생성할 때 resolve와 reject 파라메터를 받았는데 그 파라메터가 실행부의 함수와 동일하다. 앞서 선언부에서 Promise 객체를 생성할 때 resolve와 reject 파라메터를 받았는데 그 파라메터가 실행부의 함수와 동일하다.

 

 

 

---

 

 

https://tlsdnjs12.tistory.com/15

비동기식 (Asynchronous) - Promise를 활용한 async/await 이란?