>웹 프론트엔드 >JS 튜토리얼 >비동기 함수는 Async-Await를 사용하여 어떻게 값을 반환합니까?

비동기 함수는 Async-Await를 사용하여 어떻게 값을 반환합니까?

Barbara Streisand
Barbara Streisand원래의
2024-11-11 13:43:02946검색

How do Async Functions Return Values Using Async-Await?

Async 함수가 Async-Await를 사용하여 값을 반환하는 방법

일반 함수와 달리 비동기 함수는 비동기 처리를 활용하여 실행을 일시 중지하고 재개할 수 있습니다. 그러나 이로 인해 반환된 값을 어떻게 검색할 수 있습니까?

원래 쿼리

처음에 일반적인 접근 방식은 다음을 시도하는 것입니다.

async function getData() {
    const data = await axios.get('https://jsonplaceholder.typicode.com/posts');
    return data;
}
console.log(getData());

그러나 이 접근 방식은 Promise { } 출력, 비동기 함수에는 특별한 처리가 필요합니다.

Async IIFE의 Async-Await의 마법

해결책은 비동기 즉시 호출 함수 표현식(async IIFE) 내에 console.log를 래핑하는 데 있습니다. ). 다음과 같습니다:

async function getData() {
  return await axios.get('https://jsonplaceholder.typicode.com/posts');
}

(async () => {
  console.log(await getData())
})()

Async-Await with Promises

Axios가 Promise를 반환하므로 async/await를 생략하여 getData 함수를 단순화할 수 있습니다.

function getData() {
  return axios.get('https://jsonplaceholder.typicode.com/posts');
}

그런 다음 비동기 IIFE 내에 console.log를 다음과 같이 래핑합니다. 이전:

(async () => {
   console.log(await getData())
})()

결론

비동기 IIFE 내에서 async-await를 활용하면 비동기 함수에서 반환된 값을 효과적으로 검색하고 기록하여 비동기 프로그래밍의 잠재력을 활용할 수 있습니다.

위 내용은 비동기 함수는 Async-Await를 사용하여 어떻게 값을 반환합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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