JS Promise

javascript 비동기에서 항상 나오는 단어가 있다. 바로 promise. 이것은 도대체 뭘까?

과거에는 자세히 알아보지도 않고 잘 이해하지도 않고 넘어갔다. 그 결과 비동기 함수만 나오면 아주 골치아픈 상황이었지...

하지만 오늘 다시 비동기 함수를 만나며 골치아픈 상황이 또 다시 생겼고, promise를 알지 못하면 js는 사용할 수 없는 언어가 될 것이 분명하다!

생활코딩 유튜브를 보며 정말 머리아픈게 싹 내려갔다. 생활코딩 짱!

---

생활코딩 Promise 강의: https://www.youtube.com/watch?v=Sn0ublt7CWM&list=PLuHgQVnccGMBVQ4ZcIRmcOeu8uktUAbxI&index=2

 

promise는 js2015(es6)부터 사용 가능한 문법이다.

 

promise는 두개의 함수를 사용할 수 있다.

함수이름	설명
.then(callback(){})	promise가 성공 했을 때 callback이 실행된다.
.catch(callback(){})	promise가 실패 했을 때 callback이 실행된다.

여러 promise를 연결하는 방법은 두가지가 있다.

방법이름	예제
nested promise	fetch('https://jsonplaceholder.typicode.com/posts') .then((response) => { response.json().then((data)=>console.log(data)); })
promise chaining	fetch('https://jsonplaceholder.typicode.com/posts') .then((response) => response.json()) .then((data) => console.log(data));

보통 promise chaining 방식이 보기 좋아 선호 한다.

---

생활코딩 강의: https://www.youtube.com/watch?v=PasFh_t1mhY&list=PLuHgQVnccGMBVQ4ZcIRmcOeu8uktUAbxI&index=4

Promise 직접 만들기

function job1() {
	return new Promise(function (resolve, reject) {
		setTimeout(function () {
			resolve("resolved ok!");
		}, 2000);
	});
}
job1().then(function (data) {
	console.log("data", data);
});

promise는 new Promise(callback)를 통해 만들 수 있다.

여기서 callback에서는 2개의 parameter가 들어가야 한다.

보통 resolve, reject로 이름짓는다. 첫번째 parameter가 호출되면 해결(성공)했다는 뜻이고, 두번째 parameter가 호출되면 거부(실패)했다는 뜻이다.

Promise 콜백함수 안에는 비동기 함수를 사용하면 .then으로 받을 수 있다는 것이 장점이다.

 

만약 내가 만든 두가지 promise를 동기적으로 연속으로 실행시키고 싶다면?

function job1() {
	return new Promise(function (resolve, reject) {
		setTimeout(function () {
			resolve("job1 ok!");
		}, 2000);
	});
}
function job2() {
	return new Promise(function (resolve, reject) {
		setTimeout(function () {
			resolve("job2 ok!");
		}, 2000);
	});
}
job1().then(function (data) {
	console.log("data1", data);
	return job2();
})
.then(function(data) {
	console.log("data2", data)
})