> 웹 프론트엔드 > JS 튜토리얼 > JavaScript에서 Async-Await를 사용하여 비동기 함수에서 값을 검색하는 방법은 무엇입니까?

JavaScript에서 Async-Await를 사용하여 비동기 함수에서 값을 검색하는 방법은 무엇입니까?

Barbara Streisand
풀어 주다: 2024-11-12 04:17:02
원래의
752명이 탐색했습니다.

How to Retrieve Values from Async Functions with Async-Await in JavaScript?

Async-Await를 사용하여 비동기 함수에서 값을 검색하는 방법

JavaScript에서는 비동기 함수에서 값을 반환하는 방법을 이해하는 것이 중요합니다. 시나리오를 살펴보겠습니다.

시나리오:

다음 코드 조각을 고려하세요.

const axios = require('axios');
async function getData() {
    const data = await axios.get('https://jsonplaceholder.typicode.com/posts');
    return data;
}
console.log(getData());
로그인 후 복사

문제:

이 코드를 실행하면 콘솔에 "Promise { }" 메시지가 표시됩니다. 예상된 데이터를 반환하는 대신 보류 중인 약속을 받습니다. 그 이유는 비동기 컨텍스트 외부에서 비동기 함수의 결과에 액세스하려고 하기 때문입니다.

해결책:

이 문제를 해결하려면 비동기 작업은 다른 비동기 컨텍스트 내에서만 기다려야 한다는 규칙을 준수해야 합니다. 우리의 경우에는 비동기 IIFE(즉시 호출되는 함수 표현식) 내에 console.log() 문을 캡슐화하여 이를 달성할 수 있습니다.

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

(async () => {
  console.log(await getData())
})()
로그인 후 복사

이렇게 하면 console.log() 문만 실행됩니다. GetData() 함수가 비동기 작업을 완료하고 data.

또는:

코드에서와 마찬가지로 axios가 Promise를 반환하는 경우 getData()에서 async 및 Wait를 제거하여 코드를 단순화할 수 있습니다. . 그러면 코드는 다음과 같습니다.

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

(async () => {
  console.log(await getData())
})()
로그인 후 복사

비동기 컨텍스트 내에서 getData() 함수를 기다리면 여전히 동일한 결과를 얻을 수 있습니다.

위 내용은 JavaScript에서 Async-Await를 사용하여 비동기 함수에서 값을 검색하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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