找出如何返回異步函數(使用Promise或回調函數)的結果,使用JavaScript。

假設你遇到了這個問題:你需要進行一個異步調用,並且需要將該調用的結果從原始函數中返回。

像這樣:

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

但是asynchronousFunction()在內部執行了一些異步調用(例如fetch()調用),並且無法直接返回結果。該函數可能內部有一個需要等待的Promise,或者使用了回調函數。像這樣:

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()之前加上await:

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

現在,因為它是一個async函數,它會返回一個Promise:

mainFunction() // 返回一個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)
}

// 調用代碼

mainFunction(callbackFunction)