>웹 프론트엔드 >JS 튜토리얼 >JavaScript의 비동기 함수가 값이 아닌 약속을 반환하는 이유는 무엇입니까?

JavaScript의 비동기 함수가 값이 아닌 약속을 반환하는 이유는 무엇입니까?

Barbara Streisand
Barbara Streisand원래의
2024-10-18 10:47:03469검색

Why Do Async Functions in JavaScript Return a Promise and Not the Value?

값이 아닌 약속을 반환하는 비동기 함수: 연결 끊김 공개

JavaScript의 비동기 프로그래밍은 코드 실행에 혁명을 가져왔습니다. 특히 비동기 함수는 기본 이벤트 루프를 차단하지 않는 코드를 작성하는 데 널리 사용되는 수단이 되었습니다. 그러나 비동기 함수를 다룰 때 직면하게 되는 일반적인 함정은 최종 값을 직접 반환하지 않고 Promise를 반환한다는 것입니다. 이는 특히 기존 동기 프로그래밍에 익숙한 개발자에게는 혼란스러울 수 있습니다.

비동기 함수가 이런 방식으로 동작하는 이유를 이해하려면 JavaScript 이벤트 루프의 개념을 이해하는 것이 중요합니다. 이벤트 루프는 브라우저나 Node.js 환경에서 모든 작업과 콜백을 관리하는 단일 스레드 시스템입니다. 비동기 함수가 호출되면 즉시 Promise를 반환합니다. Promise는 비동기 작업의 최종 결과를 나타냅니다. 그러나 함수 자체는 Promise를 반환하기 전에 작업이 완료될 때까지 기다리지 않습니다. 이렇게 하면 후속 코드가 차단되지 않고 계속 실행될 수 있습니다.

다음 코드를 고려하세요.

async function fetchData() {
  const data = await fetch('https://example.com/data.json');
  return data;
}

fetchData().then((data) => {
  console.log(data);
});

이 예에서 fetchData 함수는 가져오기 작업의 최종 결과를 나타내는 Promise를 반환합니다. . 그러나 함수 자체는 Promise를 반환하기 전에 가져오기가 완료될 때까지 기다리지 않습니다. 결과적으로, Promise가 해결될 때까지 console.log(data) 문은 실행되지 않습니다.

비동기 함수의 최종 값에 액세스하려면 .then() 또는 wait 메서드를 사용해야 합니다. .then() 메서드는 Promise가 해결될 때 실행될 콜백 함수를 연결합니다. 위의 예에서 .then() 메서드는 fetchData 함수에서 반환된 데이터를 인쇄하는 데 사용됩니다.

또는 다른 비동기 함수 내에서 wait 키워드를 사용하여 Promise가 해결될 때까지 기다릴 수 있습니다. 이는 다음 코드에 표시된 대로 비동기 함수 내에서만 가능합니다.

async function callFetchData() {
  const data = await fetchData();
  console.log(data);
}

callFetchData();

이 예에서 callFetchData 함수는 데이터를 인쇄하기 전에 fetchData 함수가 해결될 때까지 기다리는 키워드를 사용합니다.

비동기 함수의 반환 값과 그것이 나타내는 Promise의 차이를 이해하는 것은 효율적이고 강력한 비동기 코드를 작성하는 데 중요합니다. .then() 메소드 또는 wait 키워드를 활용하면 비동기 함수의 최종 값에 액세스하고 Promises와 관련된 일반적인 함정을 피할 수 있습니다.

위 내용은 JavaScript의 비동기 함수가 값이 아닌 약속을 반환하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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