javascript 프로미스 (Promise)

* 프로미스(Promise): 

- new Promise로 생성, 함수를 전달받는데 여기서 인수는 resolve와 reject에 해당. 

resolve는 성공한 경우, reject는 실패했을 때 나타나는 함수. => 이렇게 어떤 일이 완료되어 실행되는 함수를 '콜백(callback)함수'라고 함.

-new Promise 생성자가 반환하는 프로미스 객체는 state와 result를 프로퍼티로 받음

state : pending(대기) / result: undefined

state는 초기에 pending이었다가 resolve(value)로 호출( 즉, 성공하면)되면 

state: fulfilled(이행됨) / result: value 가 됨. (이때의 result는 resolve 함수에서 전달된 값.)

만약 reject(error)가 호출(즉, 실패하면)되면 

state: rejected(거부됨) / result: error 가 됨. (이때의 result는 reject함수에서 전달된 에러.)

 

const pr = new Promise((resolve, reject) => {
  //code
});

 

예시1) 판매자가 주문을 하면 3s 행동 후 성공 or 실패 알려줌

 

판매자의 코드 - resolve의 경우

- state: pending -> 3초 후-> fulfilled

- result: undefined -> 3s-> 'OK'

const pr = new Promise((resolve, reject) => {
  setTimeout(()=>{
    resolve('OK')
  },3000)
});

판매자의 코드 - reject의 경우

- state: pending -> 3s -> rejected(거부됨)

- result: undefined -> 3s -> error

const pr = new Promise((resolve, reject) => {
  setTimeout(()=>{
    reject(new Error('error,,'))
  },3000)
});

*pr.then: then을 이용하여 resolve와 reject 처리 가능

- function(result){} : 이행 되었을 때 실행하는 함수로 OK 값이 들어옴

- function(err){}: 거부 되었을 때 실행하는 함수로 err 값이 들어옴

const pr = new Promise((resolve, reject) => {
  setTimeout(()=>{
    resolve('OK')
  },3000)
});
pr.then(
  function(result){},
  function(err){}
);

예시2) 소비자의 코드

- 여기서는 resolve로 실행되었기 때문에 이 상황에서는 두번째 콜백함수는 실행X

const pr = new Promise((resolve, reject) => {
  setTimeout(()=>{
    resolve('OK')
  },3000)
});
pr.then(
  function(result){
    console.log(result + '가지러 가기');
  },
  function(err){
    console.log('다시 주문하기');
  }
);

◎ then 이외에 사용할 수 있는 것은 catch와 finally 

- catch: 에러 발생 시 reject인 경우 실행. 두번째로 전달했던 함수를 catch에 넣어 동일하게 동작하게 함. catch로 명확하게 구분해 주는 것이 가독성에도 좋고 첫번째함수 실행했다가 발생하는 에러를 잡아줄 수 있기 때문에 이 지문 사용하는 것이 유리

pr.then(
  function(result){}
).catch(
  function(err){}
)

- finally: 함수 이행하거나 거부하거나 상관없이 처리가 완료되면 항상 실행. 로딩화면 없앨 시 유용하게 사용 가능

pr.then(
  function(result){}
).catch(
  function(err){}
).finally(
  function(){
    console.log('주문완료')
  }
)

예시)

- resolve

const pr = new Promise((resolve, reject) => {
  setTimeout(()=>{
    resolve('OK')
  },3000)
});
console.log("시작")
pr.then((result) => {
  console.log(result);
})
.catch((err)=>{
  console.log(err);
})
.finally(()=>{
  console.log("끝");
});
// 시작 -> OK -> 끝

- reject

const pr = new Promise((resolve, reject) => {
  setTimeout(()=>{
    reject(new Error("err,,XD"))
  },3000)
});
console.log("시작")
pr.then((result) => {
  console.log(result);
})
.catch((err)=>{
  console.log(err);
})
.finally(()=>{
  console.log("끝");
});
//시작 -> Error: err,,XD -> 끝

=> 이행, 거부 상관없이 마무리는 항상 끝이 나옴

예시) 콜백함수 사용해서 만들 경우

const f1 = (callback) => {
  setTimeout(function(){
    console.log("1번 주문 완료");
    callback();
  },1000);
};
const f2 = (callback) => {
  setTimeout(function(){
    console.log("2번 주문 완료");
    callback();
  },2000);
};
const f3 = (callback) => {
  setTimeout(function(){
    console.log("3번 주문 완료");
    callback();
  },3000);
};
console.log('시작')
f1(function(){
  f2(function(){
    f3(function(){
      console.log('끝')
    });
  });
});
//시작 -> 1번 주문 완료->2번 주문 완료->3번 주문 완료-> 끝

예시) 프로미스 코드로 구현할 경우

const f1 = () =>{
  return new Promise((res,rej)=>{
    setTimeout(()=>{
      res("1번 주문 완료");
    },1000);
  });
};
const f2 = (message) =>{
  console.log(message);
  return new Promise((res,rej)=>{
    setTimeout(()=>{
      res("2번 주문 완료");
    },2000);
  });
};
const f3 = (message) =>{
  console.log(message);
  return new Promise((res,rej)=>{
    setTimeout(()=>{
      res("3번 주문 완료");
    },3000);
  });
};

console.log('시작');
f1()
.then((res) => f2(res))
.then((res) => f3(res))
.then((res) => console.log(res))
.catch(console.log)
.finally(()=>{
  console.log("끝")
});
//시작 -> 1번 주문 완료->2번 주문 완료->3번 주문 완료-> 끝

=> 프로미스 체이닝(Promise chaining): 프로미스끼리 연결

예시) 중간에 실패하는 경우

- 2번에서 실패 되어 xxx가 뜨고 바로 finally로 끝남

const f1 = () =>{
  return new Promise((res,rej)=>{
    setTimeout(()=>{
      res("1번 주문 완료");
    },1000);
  });
};
const f2 = (message) =>{
  console.log(message);
  return new Promise((res,rej)=>{
    setTimeout(()=>{
      rej("xxx");
    },2000);
  });
};
const f3 = (message) =>{
  console.log(message);
  return new Promise((res,rej)=>{
    setTimeout(()=>{
      res("3번 주문 완료");
    },3000);
  });
};

console.log('시작');
f1()
.then((res) => f2(res))
.then((res) => f3(res))
.then((res) => console.log(res))
.catch(console.log)
.finally(()=>{
  console.log("끝")
});
//시작 -> 1번 주문 완료->xxx-> 끝

* Promise.all: 한꺼번에 시작하고 모두 이행되면 값을 사용할 수 있어 시간 절약할 수 있음. 각 프로미스로 넘겨준 값을 배열로 받는데 여기서는  3 작업이 모두 완료 되어야 then 부분이 실행됨

const f1 = () =>{
  return new Promise((res,rej)=>{
    setTimeout(()=>{
      res("1번 주문 완료");
    },1000);
  });
};
const f2 = (message) =>{
  console.log(message);
  return new Promise((res,rej)=>{
    setTimeout(()=>{
      res("2번 주문 완료");
    },3000);
  });
};
const f3 = (message) =>{
  console.log(message);
  return new Promise((res,rej)=>{
    setTimeout(()=>{
      res("3번 주문 완료");
    },2000);
  });
};
//Promise.all
Promise.all([f1(),f2(),f3()]).then((res)=>{
  console.log(res);
})
//(3) ['1번 주문 완료', '2번 주문 완료', '3번 주문 완료']

- timeEnd를 이용해 총 걸린 시간을 알아낼 수 있음.

console.time("x");
Promise.all([f1(),f2(),f3()]).then((res)=>{
  console.log(res);
  console.timeEnd("x")
})
//(3) ['1번 주문 완료', '2번 주문 완료', '3번 주문 완료']
//x: 3077.184814453125 ms

◎ reject로 실행할 경우: 에러 발생하고 어떠한 값도 얻지 못함. 프로미스 올은 하나의 정보라도 누락되면 페이지를 보여줄 수 없는 경우 사용됨(다 보여주거나 안 보여주거나 할 때)

const f1 = () =>{
  return new Promise((res,rej)=>{
    setTimeout(()=>{
      // res("1번 주문 완료");
      rej(new Error("xxx"));
    },1000);
  });
};
const f2 = (message) =>{
  console.log(message);
  return new Promise((res,rej)=>{
    setTimeout(()=>{
      res("2번 주문 완료");
    },3000);
  });
};
const f3 = (message) =>{
  console.log(message);
  return new Promise((res,rej)=>{
    setTimeout(()=>{
      res("3번 주문 완료");
    },2000);
  });
};
//Promise.all
console.time("x");
Promise.all([f1(),f2(),f3()]).then((res)=>{
  console.log(res);
  console.timeEnd("x")
})
// 에러 발생

*Promise.race: 사용방법은 promise.all과 동일. promise.all은 모든 작업이 완료될 때 까지 기다리지만 race는 말 그대로 경주라서 하나라도 먼저 완료되면 작업을 끝냄. 용량이 큰 이미지들을 로딩하는데 그 중 하나라도 완료되면 그 이미지를 보여줄 때 사용.

const f1 = () =>{
  return new Promise((res,rej)=>{
    setTimeout(()=>{
      res("1번 주문 완료");
    },1000);
  });
};
const f2 = (message) =>{
  console.log(message);
  return new Promise((res,rej)=>{
    setTimeout(()=>{
      // res("2번 주문 완료");
      rej(new Error("xxx"));
    },3000);
  });
};
const f3 = (message) =>{
  console.log(message);
  return new Promise((res,rej)=>{
    setTimeout(()=>{
      res("3번 주문 완료");
    },2000);
  });
};
//Promise.race
console.time("x");
Promise.race([f1(),f2(),f3()]).then((res)=>{
  console.log(res);
  console.timeEnd("x")
})
// 1번 주문 완료
// x: 1058.05078125 ms