[React] async / await

▶ async와 await이란? 

Prosmise를 쉽고 효율적으로 사용 가능하게 만들어 주는 ES8의 문법이다.

async 함수에는 await식이 포함될 수 있고, 이 식은 async 함수의 실행을 일시 중지하고 전달 된 Promise의 해결을 기다린 다음 async 함수의 실행을 다시 시작하고 완료후 값을 반환하는 구조입니다.

 

 

▶사용 방법. 

이 문법을 사용하려면 함수의 앞부분에 async를 쓰고 , 해당 함수 내부에 Promise 앞부분에 await 키워드를 사용하면 된다.

 

작성을 하면 Promise가 끝날 때 까지 기다리고 결과값을 변수에 담을 수 있다.

 

 

▶ 예시

function increase(number) {
  const promise = new Promise((success, fail) => {
    //success는 성공 fail을 실패
    setTimeout(() => {
      const add1 = number + 5;
      if (add1 > 30) {
        const error = new Error("숫자가 너무 큼당");
        return fail(error);
      }
      success(add1);
    }, 2000);
  });
  return promise;
}

async function runApp() {
  try {
    // try /cat구문을 통해 에러 처리}
    let add1 = await increase(0);
    console.log(add1);

    add1 = await increase(add1);
    console.log(add1);

    add1 = await increase(add1);
    console.log(add1);

    add1 = await increase(add1);
    console.log(add1);

    add1 = await increase(add1);
    console.log(add1);

    add1 = await increase(add1);
    console.log(add1);
  } catch (error) {
    console.log(error);
  }
}

 

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/async_function

async function - JavaScript | MDN

 

좀 더 구체적인 내용은 위에서 확인해보도록 하자