javascript async, await

* async, await를 사용하면 프로미스의 메인 메소드를 체이닝 형식으로 호출하는 것보다 가독성이 좋아짐.

* async: 항상 프로미스를 반환

async function getName(){
  return "Mike";
}
console.log(getName());

 

- 함수를 호출하고 then을 사용할 수 있음

async function getName(){
  return "Mike";
}
getName().then((name)=>{
  console.log(name);
}); //Mike

- 만약 반환 값이 Promise면 그 값을 그대로 사용

async function getName(){
  return Promise.resolve("tom");
}
getName().then((name)=>{
  console.log(name);
}); //tom

- 함수 내부에서 예외 발생 시 rejected 상태의 Promise가 반환됨.

async function getName(){
  throw new Error("err,,");
}
getName().catch((err)=>{
  console.log(err);
});

 

*await: async 내부에서만 사용 가능. 일반 함수에서 사용 시 에러 발생. await 키워드의 오른쪽에는 Promise가 오고 그 promise가 처리될 때 까지 기다림. 여기서는 1초 후에 Mike가 console 창에 찍힘.

-result의 getName에서 resolve 된 값을 기다렸다가 넣어주는 것

function getName(name){
  return new Promise((resolve, reject)=>{
    setTimeout(()=>{
      resolve(name);
    },1000);
  });
}
async function showName(){
  const result = await getName('Mike');
  console.log(result);
}

console.log("시작");
showName();
// 시작 -> Mike

예시) resolve

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);
  });
};

console.log('시작');
async function order(){
  const result1 = await f1();
  const result2 = await f2(result1);
  const result3 = await f3(result2);
  console.log(result3);
  console.log("종료");
}
order();
// 시작 -> 1번 주문 완료 -> 2번 주문 완료 -> 3번 주문 완료 -> 죵료

=> Promise then 사용하는 것 보다 가독성 훨씬 뛰어남

 

- reject에서는 try ~ catch 를 이용해 감싸주면 err 메시지 뜨고 종료까지 나타남. try ~ catch 사용하지 않으면 1번 주문 완료까지 나타나고 에러 발생하여 진행 x

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("err,,"));
    },3000);
  });
};
const f3 = (message) =>{
  console.log(message);
  return new Promise((res,rej)=>{
    setTimeout(()=>{
      res("3번 주문 완료");
    },2000);
  });
};

console.log('시작');
async function order(){
  try {
    const result1 = await f1();
    const result2 = await f2(result1);
    const result3 = await f3(result2);
    console.log(result3);
  } catch(e){
    console.log(e);
  }
  console.log("종료");
}
order();
// 시작-> 1번 주문 완료 ->Error: err,, -> 종료

◎ Promise.all 사용할 경우: async await 함수 내부에서도 비동기 함수를 병렬로 실행 가능

console.log('시작');
async function order(){
  try {
    const result = await Promise.all([f1(), f2(), f3()])
    console.log(result)
  } catch(e) {
    console.log(e);
  }
  console.log("종료");
}
order();