JavaScript で Async-Await を使用して非同期関数から値を取得する方法

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 { }」というメッセージが表示されます。予期されたデータを返す代わりに、この保留中の Promise を受け取ります。この理由は、非同期コンテキストの外部で非同期関数の結果にアクセスしようとしているためです。

解決策:

この問題に対処するには、次のようにします。非同期操作は別の非同期コンテキスト内でのみ待機する必要があるというルールに従う必要があります。この例では、console.log() ステートメントを非同期 IIFE (即時に呼び出される関数式) 内にカプセル化することでこれを実現できます。

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

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

これにより、console.log() ステートメントのみが実行されるようになります。 GetData() 関数が非同期操作を完了してデータを返したら、

代わりに:

コード内で行うように axios が Promise を返した場合、 getData() から async と await を削除することでコードを簡素化できます。コードは次のようになります。

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

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

これでも、非同期コンテキスト内で getData() 関数を待機することで同じ結果が得られます。

以上がJavaScript で Async-Await を使用して非同期関数から値を取得する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。