자바스크립트 - 프로미스 (promise)

프로미스 (promise)

---

프로미스는 콜백 함수이다.

특정 함수의 성공(resolve) 또는 실패(reject) 된 경우에 알맞은 함수를 실행할 수 있게 해준다.

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

pr.then(             # then함수에 resolve/reject가 일어났을때 일어날 함수 작성
  function(result){} # 성공한 경우
).catch(
  function(err){}    # 실패한 경우
).finally(
  function(){}       # 마지막에 반드시 수행되야 하는 작업 작성
)

 

프로미스 체이닝

Promise.all() 한꺼번에 프로미스를 실행하여 모두 완료 될 때까지 대기하였다가

모두 완료되면 결과 resolve로 반환.

하나라도 실패하면 Error 발생 → 별도 처리필요

const pr1 = () => {
  return new Promise((resolve,reject) => {
    console.log('1번째');
  });
}
const pr2 = () => {
  return new Promise((resolve,reject) => {
    console.log('2번째');
  });
}
const pr3 = () => {
  return new Promise((resolve,reject) => {
    console.log('3번째');
  });
}

Promise.all([pr1(),pr2(),pr3()]).then((resolve) => {
  console.log(resolve);
});

결과
['1번째', '2번째', '3번째']

 

프로미스 레이스

Promise.race() 한꺼번에 프로미스를 실행하여 하나라도 완료되면 바로 끝냄. (경주임)

사용법은 all()과 동일하다.

 

 

async, await

---

모든 함수에 async 키워드를 붙일 수 있다.

async 키워드가 붙은 함수는 프로미스를 반환한다.

async function pr(){
  return "ok"                   # 성공시
});
async function pr(){
  return Promise.resolve("ok"); # 성공시
  return New Error("fail");     # 실패시
  });

pr().then((msg) => {            # 성공시
  console.log(msg);
});
pr().catch((msg) => {           # 실패시
  console.log(msg);
});

async 키워드가 붙은 함수에는 await 사용이 가능하다.

async function pr(){
  const result = await.함수();  # 함수가 끝날때 까지 기다림.
}
pr();

 

동일한 기능인데 가독성이 좋기 때문에

프로미스 체이닝 보다 async - await 을 쓰는 것을 권장한다.

function msg1(){
  return new Promise((resolve, reject) =>{
    resolve('msg1 ok');
  });
}
function msg2(){
  return new Promise((resolve, reject) =>{
    resolve('msg2 ok');
  });
}
function msg3(){
  return new Promise((resolve, reject) =>{
    resolve('msg3 ok');
  });
}

async function getMsg(){
  try{
    const m1 = await msg1();
    const m2 = await msg2(m1);
    const m3 = await msg3(m2);
    console.log(m3);
    } catch(e){
      console.log(e);
    }
}
getMsg();

# 혹은 await Promise.all을 사용할 수도 있음.
async function getMsg(){
  try{
    const msg = await Promise.all([msg1(),msg2(),msg3()]);
    console.log(msg);
    } catch(e){
      console.log(e);
    }
}
getMsg();