🚩 async, await

async, await

📝 설명

• promise를 조금 더 편하게 사용할 수 있도록 하는 문법
• async는 function 앞에 위치하고, await는 promise 앞에 위치한다.

✒️ 코드 작성

입력

js

// async, await (절차적)
// .then이 필요 없음(코드가 지저분해지는 것을 방지)

// promise then 사용
function sleep(ms) {
  return new Promise((resolve) => setTimeout(resolve, ms));
}
/*
console.log("ㅎㅇ");
sleep(1000).then(() => console.log("ㅎㅇㅎㅇ"));
*/

// async, await 사용
async function process() { // 함수 정의 맨 앞에 async 추가
  console.log("ㅎㅇ");
  await sleep(1000); // 정의된 함수 내부의 promise 앞에 await 추가
  console.log("하이");
  return true; // 결과값으로 true
}

process() // 시간차 없이 그냥 작동함
.then(console.log)

/*
// 기본 상태
// promise를 사용했을 때와 똑같이 출력됨
console.log("ㅎㅇ");

setTimeout(() => {
  console.log("ㅎㅇㅎㅇ");
}, 1000);
*/

출력

• 이미지로 대체
  

🔗 참고 링크 & 도움이 되는 링크

• javascript async, await

async, await

✒️ 코드 작성

입력

js

function sleep(ms) {
  return new Promise((resolve) => setTimeout(resolve, ms));
}

async function makeError() {
  const error = new Error();
  throw error;
}

async function process() {
  try {
    await makeError()
  } 
  catch (aa) {
    console.error(aa)
  } 
  finally {

  }
}

process();

출력

• 이미지로 대체
  

🔗 참고 링크 & 도움이 되는 링크

• javascript async, await

async, await 응용

✒️ 코드 작성

입력

js

// async 붙이면 비동기, 프로미스가 호출됨 / 내부를 동기적인 코드로 작성 가능하게

// then이 중복으로 배치되고 더 복잡해짐 -> 깔끔하게 변경
// 비동기적인 코드가 동기적(절차적)으로 보이도록
function getBanana() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve("🍌");
    }, 3000);
  });
}

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

// 바나나와 사과를 함께 가지고 와서 배열로 만듦
async function fruits() {
  const banana = await getBanana(); // promise 앞에 await 붙여야 함
  const apple = await getApple();
  // console.log([banana, apple]);
  return [banana, apple];
}

fruits().then((aa) => console.log(aa)); // 4초 후 출력

출력

• 이미지로 대체
  

🔗 참고 링크 & 도움이 되는 링크

• javascript async, await

async, await 응용2

✒️ 코드 작성

입력

js

function fetchEgg(chicken) {
  // return new Promise((resolve, reject) => {});
  return Promise.resolve(`${chicken}  -> 🥚`);
}

function friedEgg(egg) {
  return Promise.resolve(`${egg} -> 🍳`);
}

function getChicken() {
  // return Promise.resolve(`🌿 -> 🐔`);
  return Promise.reject(new Error("치킨을 가지고 올 수 없음"));
}

/*
function makeFriedEgg() {
  return getChicken() // 🌿 -> 🐔
    // 대체값을 넣어줘서 에러가 나도 정상적으로 작동하도록 함.
    .catch((error) => {
      console.log(error.name);
      return "🐔";
    }) 
    .then((chicken) => {
      return fetchEgg(chicken);
    }) // 🌿 -> 🐔  -> 🥚
    .then((egg) => friedEgg(egg)) // 🌿 -> 🐔  -> 🥚 -> 🍳
    .then(console.log);
    // .catch((error)=>console.log(error.name))
}
*/
// 자동으로 비동기 함수로 변환
async function makeFriedEgg() {
  let chicken;
  try {
    chicken = await getChicken(); // 🌿 -> 🐔
  } catch (error) {
    console.log(error.name);
    chicken = "🐔";
  }
  const egg = await fetchEgg(chicken);
  const data = await friedEgg(egg);
  return console.log(data);
  // .catch((error)=>console.log(error.name))
}

makeFriedEgg();

출력

• 이미지로 대체
  

🔗 참고 링크 & 도움이 되는 링크

• javascript async, await

---