如何在 JavaScript 中按順序執行這兩個不同的代碼塊？

Question

這是我路線的代碼：

const hotspots = await Hotspot.find({user: req.user._id});
    if(!hotspots) return res.render("hotspot");
    let hotspotData = [];
    let rewards = [];
function getApiData(){
        return new Promise((resolve,reject)=>{
            let error = false;
            for (let hotspot of hotspots){
                axios.get(`https://api.helium.io/v1/hotspots/${hotspot.hotspot}`)
                    .then((resp)=>hotspotData.push(resp.data));
                
                axios.get(`https://api.helium.io/v1/hotspots/${hotspot.hotspot}/rewards/sum`)
                    .then((resp)=> {
                        console.log("first console log",resp.data.data.total)
                        rewards.push(resp.data.data.total) ;
                        console.log("Data gained from axios",resp.data.data.total);
                    })
                
            }
            if(!error) resolve();
            else reject("Something went wrong");
        })
    }

 getApiData().then(()=> {
        console.log(hotspotData);
        console.log(rewards);
        res.render("hotspot",{hotspots: hotspotData, rewards: rewards});
    });

其他一切都很好，但是當我記錄hotspotData和rewards時，我得到一個空數組，但正如你所見，我已經將我從API 獲得的數據分別推送到了那些arrays。 但是 sti;; 我得到空數組。 請幫我。 我已經記錄了 API 數據，是的，它正在發送正確的數據，但我不知道為什么這些數據沒有被推送到 arrays。

編輯：這是 output 這表明我的代碼沒有按照我想要的方式執行：

Answer 1

這里發生的是在 axios 響應到達之前執行發送回響應的代碼：

• 首先，使用 async/await 方法調用數據庫（對嗎？）。
• 然后定義返回 Promise 的 function 並調用它處理then() function 中的響應。
• 這段代碼在 Promise 為resolve() d 時執行（注意沒有代碼可以處理被拒絕的響應）。
• 現在 promise 一旦for循環結束就解決了，它不會等待axios承諾返回，它只是觸發請求並繼續。 他們返回后的代碼塊將在稍后運行。

如果你想解決這個問題，你可以做的一件事是在任何地方使用 async/await，並按順序進行調用，如下所示：

const hotspots = await Hotspot.find(...);

function async getApiData() {
    let hotspotData = [];
    let rewards = [];
    for loop {
        hotspot = await axios.get(hotspot)
        reward = await axios.get(reward)
        ...
        // add both to the arrays
    }
    return { hotspotData, rewards }
}

const { hotspotData, rewards } = await getApiData();
console.log(hotspotData);
console.log(rewards);
res.render("hotspot",{hotspots: hotspotData, rewards: rewards});

注意：上面的代碼比真正的 javascript 更偽代碼好嗎？

我認為這可能是一個有趣的閱讀： https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Async_await

此外，請注意所有 axios 調用似乎彼此獨立，因此也許您可以異步運行它們，並等待所有承諾得到解決以繼續。 查看此以獲取有關它的更多信息： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all （首先確保它按順序工作）

我認為它應該類似於一系列承諾（每個熱點一個， for循環中的獎勵），然后返回如下內容：

return Promise.all([promise1, promise2, promise3]);