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 が取得されます。

解決策:

ここでの問題は、非同期スコープの外で非同期関数の結果を待機しようとしているということです。これを修正するには、console.log を非同期 IIFE (即時呼び出し関数式) 内にカプセル化する必要があります。

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

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

このパターンにより、非同期スコープ内で getData 関数の結果を待つことができます。

代替構文:

非同期関数が Promise を返すことに依存していない場合 (例: Axios が Promise を返す)、async 関数を削除して構文を簡素化できます。 getData からのキーワードを待ちます。

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

次に、前と同じ IIFE 構造を使用して結果を待ちます:

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

詳細情報:

JavaScript での非同期/待機および非同期プログラミングの詳細については、次のリソースを参照してください:

• [JavaScript での非同期/待機](https://developer.mozilla.org/en) -US/docs/Web/JavaScript/Reference/Operators/async_function)
• [JavaScript での非同期プログラミング](https://javascript.info/async-await)

以上がJavaScript で非同期関数から値を待って返す方法?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。