[JavaScript_study] async/await

* async/await

• async 와 await 는 절차적 언어에서 작성하는 코드와 같이 사용법도 간단하고 이해하기도 쉽다.
• function 키워드 앞에 async만 붙여주면 되고
• 함수 내부에서는비동기로 처리되는 부분 앞에 await만 붙여주면 된다.
• async가 붙은 함수는 프로미스를 반환하고, 프로미스가 아닌 것은 프로미스로 감싸 반환한다.
• await 키워드를 만나면 프로미스가 처리(settled)될 때까지 기다린다.

그리고 프라미스가 처리가 완료되어 resolve(값) 되면 값만 따로 추출해서 리턴한다.

await는 promise.then보다 좀 더 세련되게 프라미스의 result 값을 얻을 수 있도록 해주는 문법이다.

promise.then보다 가독성 좋고 쓰기도 쉽다.

 

그냥 값을 return해도 async가 붙여져 있기 때문에 해당 return값을 resolve하는 Promise가 만들어진다.

 

* async/await와 promise.then

async/await을 사용하면 await가 대기를 처리해주기 때문에 .then이 거의 필요하지 않습니다.

여기에 더하여 promise.catch 대신 일반 try..catch를 사용할 수 있다는 장점도 생깁니다.

항상 그러한 것은 아니지만, promise.then을 사용하는 것보다 async/await를 사용하는 것이 대개는 더 편리합니다.

​

그런데 문법 제약 때문에 async함수 바깥의 최상위 레벨 코드에선 await를 사용할 수 없습니다.

그렇기 때문에 관행처럼 .then/catch를 추가해 최종 결과나 처리되지 못한 에러를 다룹니다.

---

* async/await 예시 코드

function getBanana() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('🍌');
    }, 1000);
  });
}

function getApple() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('🍎');
    }, 3000);
  });
}

function getOrange() {
  return Promise.reject(new Error('no orange'));
}

// Promise의 then을 이용한 방번
/**
function fetchFruits() {
  getBanana().then((banana) =>getApple().then((apple) => [banana, apple])).then(console.log);
}

fetchFruits() //
  .then((fruits) => console.log(fruits));
*/

// async, await를 이용한 방법
// 바나나과 사과를 같이 가지고 오기
// 함수앞에 async를 붙여주어 비동기적인 코드들을 동기적으로 작동하게 해준다.
// 함수 내부에서는 await를 이용해서 동기적으로 작성가능하다.
// await 키워드를 이용해서 기다렸다가 Promise값이 resolve가 되면 그 값을 변수에 할당해준다.
// 그냥 값을 return해도 async가 붙여져 있기 때문에 해당 return값을 resolve하는 Promise가 만들어진다.
async function fetchFruits() {
  const banana = await getBanana();
  const apple = await getApple();
  return [banana, apple];
}

fetchFruits() //
  .then((fruits) => console.log(fruits));

 

function fetchEgg(chicken) {
  return Promise.resolve(`${chicken} => 댤걀`);
}

function fryEgg(egg) {
  return Promise.resolve(`${egg} => 계란후라이`);
}

function getChicken() {
  // return Promise.reject(new Error('치킨을 가지고 올 수 없음!'));
  return Promise.resolve(`사육 => 닭`);
}

// promise then을 async로 변경(황현우)
async function makeChicken() {
  const fetch = await fetchEgg("닭")
  const fry = await fryEgg(fetch)
  return fry
}

makeChicken() //
  .then((chicken) => console.log(chicken));


// function안에 promise와 then, catch를 return해주면 function이름에 ...이 뜨고 cttl + . 을 클릭하면 자동으로 async로 변환해주는 작업을 수행할 수 있다.
// function make() {
//   return getChicken()
 
//   .then(chicken => {return fetchEgg(chicken)})
//   .then(egg => fryEgg(egg))
//   .then(friedEgg => console.log(friedEgg))
//   // 만약 getChicken과정에서 error이 발생한 경우
//   .catch(error => console.log(error.name))
// }

// 자동으로 async로 변경
async function make() {
  try {
    const chicken = await getChicken();
    const egg = await fetchEgg(chicken);
    const friedEgg = await fryEgg(egg);
    return console.log(friedEgg);
  } catch (error) {
    return console.log(error.name);
  }
}

make()