/

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

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

找出如何返回異步函數（使用Promise或回調函數）的結果，使用JavaScript。

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

像這樣：

1
2
3
4
const mainFunction = () => {
 const result = asynchronousFunction()
 return result
}

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

1
2
3
4
5
const asynchronousFunction = () => {
 return fetch('./file.json').then(response => {
 return response
 })
}

那麼該怎麼辦呢？

使用async/await是最直接的解決方案。您可以使用await關鍵字代替基於Promise的方法，像我們之前使用的方法一樣：

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

在這種情況下，在mainFunction中，我們需要在函數簽名前加上async，並在調用asynchronousFunction()之前加上await：

1
2
3
4
const mainFunction = async () => {
 const result = await asynchronousFunction()
 return result
}

現在，因為它是一個async函數，它會返回一個Promise：

1
mainFunction() // 返回一個Promise

為了獲取結果，您可以將其封裝在IIFE中，就像這樣：

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

這段代碼看起來像是您從其他語言中熟悉的同步代碼，但它完全是異步的。

另一種方法是使用回調函數。但是，雖然使用async/await只需要修改asynchronousFunction()的代碼，但是在這種情況下，我們需要：

  1. 修改asynchronousFunction()的代碼
  2. 修改mainFunction()的代碼
  3. 修改調用代碼

以下是一個示例。asynchronousFunction()接收一個新的函數作為參數，我們稱之為callback。它執行該函數，並將response對象作為參數傳遞：

1
2
3
4
5
const asynchronousFunction = callback => {
 return fetch('./file.json').then(response => {
 callback(response)
 })
}

這個函數由mainFunction傳遞：

1
2
3
4
5
6
7
const mainFunction = () => {
 const callback = result => {
 console.log(result)
 }

 asynchronousFunction(callback)
}

拼圖的最後一塊在調用mainFunction的函數中。由於無法直接從mainFunction返回結果，因為我們是異步獲取結果，調用函數必須更改如何處理它。

所以，我們可以使用以下代碼來替換const result = mainFunction()：

1
2
3
4
5
6
7
8
9
10
11
const callbackFunction = result => {
 console.log(result)
}

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

// 調用代碼

mainFunction(callbackFunction)

tags: [“async/await”, “JavaScript”, “callback”, “Promise”]