亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

Promise.all 在數組映射中的不良行為?

Promise.all 在數組映射中的不良行為?

哆啦的時光機 2022-10-21 09:34:14
我正在使用 Vue,我正在嘗試在 map over array 中發出一些 axios 請求,但我得到了非常糟糕的結果。我的功能是:  async getFavoriteRecipes(){           try{            let myRecipes=[]            const response = await this.axios.get("https://david-matan-recipe-api-server.herokuapp.com/api/profiles/myprofile")            let myFavoritedIds=response.data.favoriteRecipe;            myRecipes= await Promise.all(myFavoritedIds.map(async (recipeInfo) =>{                if(id.type==="spooncalur"){                    const result = await this.axios.get("https://david-matan-recipe-api-server.herokuapp.com/api/recipes/"+recipeInfo.id)                    myRecipes.push(result.data)                    return myRecipes                }                else{                    const result = (await this.axios.get("https://david-matan-recipe-api-server.herokuapp.com/api/recipes/userecipe/"+recipeInfo.id))                    myRecipes.push(result.data)                    return myRecipes                }                 }            ))            this.myFavoriteRecipe=myRecipes           }           catch(err)           {             if(err.response.status==='401'){                 this.$root.store.username=undefined                 this.$router.push('/login')             }              console.log(err.response)           }        }我期望得到 6 個 json 對象的數組,但我得到了一個 6 個數組的數組,每個數組都包含相同的 6 個 json 對象。有人可以解釋我為什么會這樣嗎?
查看完整描述

2 回答

?
Smart貓小萌

TA貢獻1911條經驗 獲得超7個贊

看起來,您想要一個包含每個請求的結果數據的數組。所以我建議不要將數據推送到myRecipes數據以返回它。這將自動在列表中“添加”(或更好地替換)它。代碼將如下所示:


async getFavoriteRecipes() {

    try {

        let myRecipes = []

        const response = await this.axios.get("https://david-matan-recipe-api-server.herokuapp.com/api/profiles/myprofile")

        let myFavoritedIds = response.data.favoriteRecipe;

        myRecipes = await Promise.all(myFavoritedIds.map(async (recipeInfo) => {

            if (id.type === "spooncalur") {

                const result = await this.axios.get("https://david-matan-recipe-api-server.herokuapp.com/api/recipes/" + recipeInfo.id)

                return result.data

            } else {

                const result = (await this.axios.get("https://david-matan-recipe-api-server.herokuapp.com/api/recipes/userecipe/" + recipeInfo.id))

                return result.data

            }

        }))

        this.myFavoriteRecipe = myRecipes

    } catch (err) {

        if (err.response.status === '401') {

            this.$root.store.username = undefined

            this.$router.push('/login')

        }

        console.log(err.response)

    }

}

如果您不了解該map功能,這可能會有所幫助https://www.youtube.com/watch?v=DC471a9qrU4或https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array /地圖


查看完整回答
反對 回復 2022-10-21
?
交互式愛情

TA貢獻1712條經驗 獲得超3個贊

Ayk 已經解釋了問題的原因......但代碼也可以簡化為


const path = "https://david-matan-recipe-api-server.herokuapp.com/api/recipes/" + 

  id.type==="spooncalur" ? '' : 'userecipe/'

  

myRecipes = await Promise.all(myFavoritedIds.map(recipeInfo =>

  this.axios.get(path + recipeInfo.id)

))

無需進行this.axios.get(path + recipeInfo.id)異步,因為 Promise 都將一組 Promise 作為參數,而不是結果值


查看完整回答
反對 回復 2022-10-21
  • 2 回答
  • 0 關注
  • 193 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號