[JS] promise 엿보기

promise란 뭘까.

• promise와 비동기를 묶어서 생각하지 마라.
• promise는 콜백함수를 대체하는 디자인패턴일 뿐이다.
  • 근데 성공하는 경우와 실패하는 경우를 나눌 수 있다는 장점이 있다.
• promise는 안에 들어있는 뭔가(연산, 이벤트리스너, ajax 등)가 성공했다면 then, 실패했다면 catch를 실행할 수 있도록 판정하는 도구다.
  
  

---

const promise = new Promise()

이런 식으로 promise를 만드는데, promise 안에 성공/실패를 판정할 무엇인가를 함수로 집어넣어 준다.
나는 1+1이 성공했는지(이건 무조건 성공하는 연산이긴 하다.)를 판정하려고 한다.

const promise = new Promise(() => {
	const 연산 = 1+1;
})

여기서 성공했을때 실행할 함수, 실패했을때 실행할 함수(executor)를 파라미터로 넣어준다.

const promise = new Promise((resolve, reject) => {
	const 연산 = 1+1;
})

그리고 성공하면 resolve, 실패하면 reject를 실행한다고 코드를 작성하면 된다.
이 경우, 무조건 성공하니까 그냥 resolve를 실행하겠다.

const promise = new Promise((resolve, reject) => {
	const 뭔가 = 1+1;
	resolve();
})

이제 이걸 사용해보자.

const promise = new Promise((resolve, reject) => {
	const 뭔가 = 1+1;
	resolve();
});

promise
  .then(() => {console.log("성공했다")})
  .catch(() => {console.log("실패했다")});

promise는 판정하는 도구이다.
then은 성공하면 괄호 안에 있는걸 실행해주세용~
catch는 실패하면 괄호 안에 있는걸 실행해주세용~

합쳐보면, promise가 판정한 결과에 따라 then이나 catch가 실행되는데, 어쩌피 짜놓은 promise가 무조건 성공이라... 성공했다는 문장이 출력된다.

만약에 실패하는 경우라고 가정해본다면?
서버에서 데이터를 받아와주세요~ 했는데 실패했다면? catch 내의 코드가 실행될 것이다.

주로 사용하는 예시인 setTimeout도 써봤다.

const promise = new Promise((resolve, reject) => {
	setTimeout(()=>{
      resolve();
    },3000)
});

promise
  .then(() => {console.log("성공했다")})
  .catch(() => {console.log("실패했다")});

console.log('비동기')

이럼 3초 후에 성공했다고 찍히겠지?
그리고 setTimeout으로 인해 console.log('비동기')가 먼저 실행된다.

끗.