在繼續之前等待 function 完成的更清晰的方式

Question

首先，我從公共 api 獲取隨機報價。只有在我真正有報價之后，我才想呈現包含該報價的頁面。

我是 JavaScript 新手，如果這是一個愚蠢的問題，請多多包涵。

在繼續呈現頁面之前，我一直在努力等待 api 調用返回。 我想執行以下操作，但這不起作用，因為在我引用之前會調用res.render 。 （注意：我使用的是 Express 和 Axios）

async function getRandomQuote() {
    try {
        const res = await axios.get("https://api.quotable.io/random?tags=famous-quotes")
        console.log(`${res.data.content} - ${res.data.author}`)     //This prints fine
        return res.data
    } catch(e) {
        console.log('error', e)
    }
}

app.get('/', (req, res) => {

    const quote = getRandomQuote()
    console.log(`${quote.content} - ${quote.author}`)    //This prints 'undefined' because 'getRandomQuote' isn't finished yet

    res.render('home', { quote })
})

我想出的唯一方法如下，但我發現這真的很亂。 有沒有更清潔的方法來做到這一點？ 或者我是否總是需要將所有我想要等待的代碼行放在異步 function 中？

async function getRandomQuote() {
    try {
        const res = await axios.get("https://api.quotable.io/random?tags=famous-quotes")
        console.log(`${res.data.content} - ${res.data.author}`)     //This prints fine
        return res.data
    } catch(e) {
        console.log('error', e)
    }
}

app.get('/', (req, res) => {

    const getQuoteAndRender = async() => {
        const quote = await getRandomQuote()
        console.log(`${quote.content} - ${quote.author}`)    //This prints only if I wrap everything in yet another aync function, otherwise it will not wait for 'getRandomQuote' to complete

        res.render('home', { quote })
    }
    getQuoteAndRender()
})

（注意：我意識到在成功獲得報價后呈現頁面也不理想，因為這意味着如果報價 api（出於某種原因）不起作用，我根本不會獲得頁面。但現在我只想知道如何在等待中做到這一點。）

Answer 1

這是您需要做的。 通過執行此操作使您的 controller async app.get('/', async (req, res)

app.get('/', async (req, res) => {

const quote = await getRandomQuote()
console.log(`${quote.content} - ${quote.author}`)    //This prints 'undefined' because 'getRandomQuote' isn't finished yet

res.render('home', { quote })
})

Answer 2

嘗試這個：

getRandomQuote()
.then(quote => {
  console.log(`${quote.content} - ${quote.author}`) 
  res.render('home', { quote })
});