> 웹 프론트엔드 > JS 튜토리얼 > 자바스크립트: 비동기/대기

자바스크립트: 비동기/대기

Mary-Kate Olsen
풀어 주다: 2024-11-29 12:06:12
원래의
472명이 탐색했습니다.

async 및 wait는 Promise 작업을 더욱 쉽고 읽기 쉽게 만들어주는 JavaScript의 강력한 기능입니다. 이를 통해 동기 코드처럼 보이고 동작하는 비동기 코드를 작성할 수 있습니다. 간략한 개요는 다음과 같습니다.

비동기 기능

  • 정의: 비동기 함수는 Promise를 반환하는 함수입니다. 그 안에서 Wait를 사용할 수 있습니다.
  • 구문:
  async function myFunction() {
    // Your code here
  }
로그인 후 복사

키워드를 기다리다

  • 정의: wait 키워드는 비동기 함수 내에서만 사용할 수 있습니다. 비동기 함수의 실행을 일시 중지하고 Promise가 해결되거나 거부될 때까지 기다립니다.
  • 구문:
  let result = await somePromise;
로그인 후 복사

다음은 async와 Wait가 함께 작동하는 방식을 보여주는 간단한 예입니다.

function fetchData() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('Data fetched');
    }, 2000);
  });
}

async function getData() {
  console.log('Fetching data...');
  const data = await fetchData();
  console.log(data);
}

getData();
로그인 후 복사

이 예에서는:

  1. fetchData는 2초 후에 해결되는 Promise를 반환하는 함수입니다.
  2. getData는 fetchData가 해결될 때까지 기다리는 데 사용되는 비동기 함수입니다.
  3. getData가 호출되면 "데이터 가져오는 중..."을 기록하고 fetchData가 해결될 때까지 기다린 후 "가져온 데이터"를 기록합니다.

이익

  • 가독성: async/await는 비동기 코드를 동기 코드처럼 보이게 만들어 더 쉽게 읽고 이해할 수 있습니다.
  • 오류 처리: async/await와 함께 try...catch 블록을 사용하면 오류를 더 깔끔하게 처리할 수 있습니다.

오류 처리 예

async function getData() {
  try {
    console.log('Fetching data...');
    const data = await fetchData();
    console.log(data);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}

getData();
로그인 후 복사

이 예에서 fetchData가 거부되면 오류는 catch 블록에 의해 포착되고 "Error fetching data:"가 오류 메시지와 함께 기록됩니다.


읽어주셔서 감사합니다!
이 기사가 도움이 되고 유익했기를 바랍니다. 재미있게 보셨거나 새로운 것을 배웠다면 댓글로 의견을 공유하시거나 저에게 연락해주세요.

제 작업을 지원하고 이와 같은 콘텐츠를 더 많이 만들 수 있도록 도와주고 싶으시다면 커피 한 잔 사시는 것을 고려해 보세요. 여러분의 지원은 세상을 의미하며 저에게 동기를 부여합니다!

방문해 주셔서 다시 한번 감사드립니다! ?

Javascript: async/await

위 내용은 자바스크립트: 비동기/대기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:dev.to
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿