JavaScript에서 비동기 함수의 값을 기다리고 반환하는 방법은 무엇입니까?

비동기 함수에서 값을 기다리고 반환하는 방법

비동기 함수로 작업할 때 반환되는 값은 동기 함수와 다를 수 있습니다. 이 기사에서는 async-await를 사용하여 이 동작을 처리하는 방법을 살펴보겠습니다.

문제:

다음에서 데이터를 가져오는 비동기 함수 getData가 있다고 가정합니다. Axios를 사용하는 API입니다. 데이터를 검색하고 기록하려면 다음 코드를 사용해 보세요.

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() {
    const data = await axios.get('https://jsonplaceholder.typicode.com/posts');
    return data;
}

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

이 패턴을 사용하면 비동기 범위 내에서 getData 함수의 결과를 기다릴 수 있습니다.

대체 구문:

async 함수는 약속 반환에 의존하지 않으므로(예: Axios는 약속 반환) getData에서 async 및 wait 키워드를 제거하여 구문을 단순화할 수 있습니다.

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

그런 다음 동일한 IIFE 구조를 사용하세요. 이전과 마찬가지로 결과를 기다리세요.

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

더 보기 정보:

JavaScript의 async/await 및 비동기 프로그래밍에 대한 자세한 내용은 다음 리소스를 참조하세요.

• [Async/Await in JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/async_function)
• [JavaScript의 비동기 프로그래밍](https://javascript.info/ 비동기 대기)

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