JavaScriptで非同期関数の結果を返す方法

JavaScriptを使用して、非同期関数、promiseベースまたはコールバックベースの結果を返す方法を確認してください

この問題があるとします。非同期呼び出しを行っており、その呼び出しの結果を元の関数から返す必要があります。

このような:

const mainFunction = () => {
  const result = asynchronousFunction()
  return result
}

だがasynchronousFunction()その中でいくつかの非同期呼び出しを実行します(たとえば、fetch()呼び出し)、結果値を直接返すことはできません。おそらく内部的には、待つ必要のある約束、またはコールバックがあります。このような:

const asynchronousFunction = () => {
  return fetch('./file.json').then(response => {
    return response
  })
}

代わりに何ができますか?

Async / awaitは最も簡単なソリューションです。あなたはawait以前に使用したようなpromiseベースのアプローチではなくキーワード:

const asynchronousFunction = async () => {
  const response = await fetch('./file.json')
  return response
}

この場合、mainFunction関数シグネチャにasyncを追加し、呼び出す前に待機する必要がありますasynchronousFunction()

const mainFunction = async () => {
  const result = await asynchronousFunction()
  return result
}

これは非同期関数であるため、promiseを返します。

mainFunction() //returns a Promise

したがって、結果を取り戻すには、次のようにこれをIIFEでラップできます。

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

コード見える他の言語の同期コードと同じですが、完全に非同期です。

別のアプローチは、コールバックを使用することです。しかし、async / awaitを使用すると、asynchronousFunction()コード、この場合は

  1. を変更しますasynchronousFunction()コード
  2. を変更しますmainFunction()コード
  3. 呼び出しコードも変更します

これが例です。asynchronousFunction()パラメータとして新しい関数を受け取ります。これを呼び出しますcallback。それを呼び出して、responseオブジェクト:

const asynchronousFunction = callback => {
  return fetch('./file.json').then(response => {
    callback(response)
  })
}

この関数は渡されますmainFunction

const mainFunction = () => {
  const callback = result => {
    console.log(result)
  }

asynchronousFunction(callback) }

パズルの最後のピースは、を呼び出す関数にありますmainFunction。から直接応答を返すことができないのでmainFunction、これは非同期で取得されるため、呼び出し元の関数は処理方法を変更する必要があります。

だから代わりにconst result = mainFunction()、使用できます

const callbackFunction = result => {
  console.log(result)
}

const mainFunction = callback => { asynchronousFunction(callback) }

//call the code mainFunction(callbackFunction)

私の無料ダウンロードJavaScriptビギナーズハンドブック


その他のjsチュートリアル: