연습장

async/await 본문

기타

async/await

js0616 2024. 7. 28. 03:23

프로미스의 완료를 기다리기 위한 문법, 비동기 코드를 동기처럼 작성 할 수 있음. 

여러 비동기 작업을 순차적으로 진행할때 사용

  • await 키워드는 async 함수 내에서만 사용할 수 있습니다.
  • await는 Promise 객체 앞에 사용됩니다. 따라서 await를 사용하려면 해당 함수가 async로 선언되어 있어야 합니다.
  • async 함수 안에서는 await를 사용하여 동기 코드처럼 작성할 수 있지만, await는 반드시 async 함수 내에서만 사용할 수 있습니다.
  • await는 비동기 함수의 완료를 기다리는 동안 해당 함수의 실행을 일시 중지하므로, 코드 실행 순서를 제어하기에 유용합니다.
  • await가 던진 에러는 throw의 에러를 처리하는 것 처럼 try-catch를 사용해 처리 할 수 있습니다.

 

 

 

async function exampleAsyncFunction() {
  console.log('시작');
 
  try {
      const result1 = await someAsyncOperation();
      console.log('결과 1:', result1);

      const result2 = await anotherAsyncOperation();
      console.log('결과 2:', result2);
  } catch (error) {
      console.error('오류 발생:', error);
  }

  console.log('완료');
}

function someAsyncOperation() {
  return new Promise(resolve => {
      setTimeout(() => {
          resolve('첫 번째 작업 완료');
      }, 1000);
  });
}

function anotherAsyncOperation() {
  return new Promise(resolve => {
      setTimeout(() => {
          resolve('두 번째 작업 완료');
      }, 1500);
  });
}

exampleAsyncFunction();

 

 

여러 비동기 작업이 순차적으로 진행될 필요가 없는 경우는, await 대신 Promise.all 함수를 사용하는 것이 낫다.

 

 

비동기작업 -> callback 중첩 ->  Promise -> 많은 비동기 작업 -> async-await 사용하여 순서 지정 

 

 

https://www.youtube.com/watch?v=cDu9A5dl1J8&list=PLBh_4TgylO6CI4Ezq3OLRRzg2NAn3FLPB&index=2

 

 

https://chatgpt.com/

'기타' 카테고리의 다른 글

실행 컨텍스트  (0) 2024.07.28
이벤트 버블링, 핸들링  (0) 2024.07.28
Promise  (0) 2024.07.28
02. 면접 대비 js  (0) 2024.07.27
비동기 처리  (0) 2024.07.27