>  기사  >  웹 프론트엔드  >  JavaScript에서 원활한 비동기 프로그래밍을 위해 \'async\' 및 \'await\'를 사용하는 방법은 무엇입니까?

JavaScript에서 원활한 비동기 프로그래밍을 위해 \'async\' 및 \'await\'를 사용하는 방법은 무엇입니까?

Mary-Kate Olsen
Mary-Kate Olsen원래의
2024-10-19 22:38:29540검색

How to Use 'async' and 'await' for Smooth Asynchronous Programming in JavaScript?

'async' 및 'await'가 포함된 JavaScript의 비동기 함수

비동기 프로그래밍은 JavaScript 모델에서 매우 중요합니다. 비동기 작업이 완료되면 나중에 추가 코드를 실행하는 것이 일반적입니다. 이전에는 콜백이 이 목적으로 활용되었습니다. 그러나 중첩된 콜백은 "콜백 지옥"으로 이어질 수 있습니다.

Promise

Promise는 중첩된 콜백과 관련된 문제를 개선했습니다. 이는 더 깔끔한 구문과 오류 처리를 제공하는 "약속 체인"을 통한 연결을 가능하게 합니다. 예:

<code class="javascript">const randomProm = new Promise((resolve, reject) => {
  if (Math.random() > 0.5) {
    resolve('Succes');
  } else {
    reject('Failure');
  }
});

// Promise chain
randomProm
  .then((value) => {
    console.log('inside then1');
    console.log(value);
    return value;
  })
  .then((value) => {
    console.log('inside then2');
    console.log(value);
    return value;
  })
  .catch((value) => {
    console.log('inside catch');
    console.log(value);
  });</code>

'async' 및 'await' 키워드

"비동기 함수"라고도 알려진 비동기 함수는 비동기 프로그래밍을 더욱 단순화하기 위해 도입되었습니다. . 이러한 함수에는 async 키워드가 접두어로 붙으며 wait 키워드 사용을 허용합니다.

await는 내부 표현식(일반적으로 Promise)이 확정될 때까지 비동기 함수의 실행을 일시 중지합니다. 표현식이 해결되면 함수가 다시 시작됩니다. 예:

<code class="javascript">async function myAsyncFunc() {
  try {
    const result = await randomProm;
    console.log(result);
  } catch (error) {
    console.log(error);
  }
}

myAsyncFunc();</code>

이 예에서 myAsyncFunc는 RandomProm Promise의 결과를 기다리는 비동기 함수입니다. Promise가 해결되거나 거부되면 try/catch 블록의 해당 분기가 실행됩니다. 비동기 및 대기를 활용하여 복잡한 콜백 논리가 필요 없으며 코드 가독성이 향상됩니다.

위 내용은 JavaScript에서 원활한 비동기 프로그래밍을 위해 \'async\' 및 \'await\'를 사용하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.