Promise.all 在数组映射中的不良行为？

Question

我正在使用 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 对象。有人可以解释我为什么会这样吗？

Answer 1

看起来，您想要一个包含每个请求的结果数据的数组。所以我建议不要将数据推送到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 /地图

Answer 2

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 作为参数，而不是结果值