Async/Await

📍Async/Await 역할

비동기 처리 방식인 콜백 함수와 promise의 단점을 보완하고 개발자가 읽기 좋은 코드를 작성 할 수 있게 도와줌

 

📍비동기 처리 방식

웹페이지를 새로고침하지 않고도 데이터를 불러오는 방식

예 ) 댓글 입력시 웹 페이지의 새로고침 없이 댓글 영역만 업데이트되어 적용됨

https://joohee0826.tistory.com/26

동기 /비동기

 

📍 asnyc/await 사용 방법 

async function 함수명() {
  await 비동기_처리_메서드_명();
}

 

 

📍asnyc 

- function앞에서 사용 

- asnyc가 붙은 함수는 프라미스를 반환하고 프라미스가 아닌 것은 프라미스로 감싸서 반환 

 

async function f() {
  return 1;
}

f().then(alert); // 1
//result가 1인 이행 프라미스가 반환

📍await  

- async함수 안에서만 작동

- 프라미스가 처리 될 때 까지 기다리는역할

async function f() {

  let promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve("완료!"), 1000)
  });

  let result = await promise; // 프라미스가 이행될 때까지 기다림 (*)

  alert(result); // "완료!"
}

f();

//함수를 호출하고, 함수 본문이 실행되는 도중에 (*)로 표시한 줄에서 실행이 잠시 '중단’되었다가 프라미스가 처리되면 실행이 재개된다.
이때 프라미스 객체의 result 값이 변수 result에 할당된다. 따라서 위 예시를 실행하면 1초 뒤에 '완료!'가 출력된다.

 

☑️예시

export const getStaticProps: GetStaticProps = async ( {params}) => {
    const postData = await getPostData(params.id as string)
    return{
        props: {
            postData
        }
    }
}

 

 

async function getPost() {
    const res  = await fetch('http://127.0.0.1:8090/api/collections/posts/records',
    { cache: 'no-store'});
    const data = await res.json();
    return data?.items as any[];
    //data가 있으면 items을 any타입으로 반환
}

 

 

//단순화한 코드
  const fetchPopularProjects = async () => {
    const response = await axios.get('/data.json');
    setPopularProjects(response.data);
  };