找出如何返回異步函數(使用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()
的代碼,但是在這種情況下,我們需要:
- 修改
asynchronousFunction()
的代碼 - 修改
mainFunction()
的代碼 - 修改調用代碼
以下是一個示例。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)