[JavaScript]코딩앙마 중급(10) async, await

async

• async, await를 사용하면 promise에 then메소드를 체인형식으로 호출하는 것보다 가독성이 좋아짐.
  

함수앞에 async를 붙이면 호출시 promise를 반환함.
그래서 함수를 호출하고 then을 사용할수 있음.

const a = new Promise((res,rej)=>{
    res('완료');
})

console.log(a);//Promise { '완료' }

a.then((x)=>{
    console.log(x);
})//완료

async function b(){
    return '완료';
}
console.log(b());//Promise { '완료' }

b().then((x)=>{
    console.log(x);
});//완료

• 만약 반환값이 promise면
  promise.resolve('tom')값을 그대로 사용
  

async function a(){
    return Promise.resolve('tom');
}

console.log(a());//Promise { <pending> }


a().then((x)=>{
    console.log(x)
});//tom

async function b(){
    return 'kate';
}

console.log(b());//Promise { 'kate' }

• 만약 함수내부에서 예외가 발생하면 rejected 상태의 프로미스가 반환됨.
  
  then만 있어서 안나왔고

rejected 이기때문에 catch로 확인.

await

• await키워드는 async함수 내부에서만 사용할 수 있음.(일반함수에서 사용시 에러발생)
  await키워드 오른쪽에는 promise가 오고 그 promise가 처리될 때 까지 기다림.
  
  그래서 위 코드는 시작하고 1초후 mike가 찍힘
  result에 getName에서 resolve된 값을 기다렸다가 넣어줌

적용

• 위 코드를 async, await로 바꿔보기
  
  then부분을 위와 같이 변경시 동일하게 실행
  기다렸다가 값이 들어가는게 보이기 때문에 then을 쓰는것 보다 가독성이 좋음.
• 만약 rejected가 된다면?
  
  에러가 발생하며, 코드가 멈춤
  promise는 catch를 써줬는데
  async, await문 에서는 try,catch문으로 감싸주면됨.
  
  try부분을 시도하고 에러가 발행하면 catch문을 실행.
  에러부분을 찍고 이후과정(try,catch문 외)이 계속 진행됨.
• promise.all 사용해보기
  await 오른쪽에 promise옴.
  promise.all을 작성해주고실행(내부에 배열put)
  
  async, await문 내부에서도 비동기함수를 병렬적으로 실행할 수 있음.