072DATA

async와 await 짧은 요약 본문

Anything/끄적끄적

async와 await 짧은 요약

0720 2024. 8. 2. 23:29

 

 

async function printTest() {
  
    // await라는 키워드를 가지고 있는 공간은 반드시 비동기함수를 핸들링 할 수 있는 async 표현 필요
  console.log("안녕하세요. 함수입니다!");
  
  //fetch(알을 품다) : 데이터를 요청하는 것
  //.json도 완성된 결과를 받으려면 기다려야 하는구나..

  try{
    //비동기 함수에 동기적 표현
  // 데이터가 fullfile되기 위해서는 3초정도 시간이 걸리기 떄문에
  // await를 이용해서 pending -> fullfill이 될 떄 까지 기다리기
  const result = await fetch("https://jsonplaceholder.typicode.coma/users");

  // .json도 비동기적으로 동작. fetch와 비슷해서 완료될 떄까지 기다려줘야함
  const users = await result.json();

  console.log(users);
  } catch (error) {
  if(error){
    console.log(error);
  }
}
// 동기적이 최우선 그 후로 비동기면 응답이 제일 빠른 것 부터 차례로 찍힘
//pending으로 찍히는 이유는 비동기여서
printTest();

 

promise는 비동기 작업이 진행 될 때 여겨지는 규칙이며

 

3가지 규칙이 존재함

 

pending은 요청하는 단계

fullfilled는 수행됐을 때 즉 성공

rejected는 단어 그대로 실패된 거절된 상태

 

그러하여 async 와 await 문법을 사용하여

pending이 끝날 때 까지 기다린 다음

fullfilled나 rejected를 받아 냄

 

또 try catch문으로  발생할 수 있는 예외를 처리하여

프로그램의 예기치 않은 종료를 방지하고,

오류가 발생했을 때 적절한 조치를 취할 수 있도록 같이 사용해줌

 

비슷한 문법으로 promise 체이닝(fetch, then)문법이 있는데

async, await 문법이 가독성 향상과 에러 처리에 간편함 등으로 장점이 있음