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