如何在JavaScript中返回異步函數的結果

了解如何使用JavaScript返回異步函數(基於promise或基於回調)的結果

假設您有這個問題:您正在進行異步調用,並且您需要從原始函數返回該調用的結果。

像這樣:

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

asynchronousFunction()在其中執行一些異步調用(例如fetch()調用),並且無法直接返回結果值。也許在內部它有一個需要等待的承諾或回調。像這樣:

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

您能做什麼呢?

異步/等待是最直接的解決方案。您使用await關鍵字而不是基於承諾的方法,就像我們之前使用的方法一樣:

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())
})()

代碼看起來就像您習慣於使用其他語言的同步代碼一樣,但是它是完全異步的。

另一種方法是使用回調。但是當使用異步/等待時,我們可以只更改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教程: