嵌套fetch结合Array.map使用无法正确返回值的问题求助

• 你在map的回调函数中没有return内部fetch的执行结果，导致map遍历后得到的数组全是undefined，调用join方法后自然是空字符串，所以innerHTML没有内容。
• fetch是异步请求，就算你补了return，map得到的也是一组未完成的Promise对象，你没有等待所有商品详情请求完成就直接赋值innerHTML，此时请求还在后台运行，根本拿不到返回的HTML模板。

你可以用Promise.all批量等待所有异步请求完成，写法和你现有的then链逻辑完全一致，不需要大改原有代码：

fetch(`${rootUrl}api/users/getCartItems`,{
    method: "GET",
    headers:{
        "Authorization": `Bearer ${token}`
    }
})
.then(result=>result.json())
.then(result=>{
    // 给每个fetch前面加return，把所有请求Promise存到数组
    const requestArr = result.itemsArr.map(e=>{
        return fetch(`${rootUrl}api/products/${e.item}`,{
            method: "GET"
        })
        .then(product=> product.json())
        .then(product =>{
            return `
                <br><br>
                ${e.item}<br>
                ${product.name}<br>
                ${product.description}<br>
                ${product.price}<br>
                <br><br>
            `
        })
        // 可选：单个商品请求失败时返回错误提示，避免整体渲染失败
        .catch(() => `<br><br>ID为${e.item}的商品加载失败<br><br>`)
    })
    // 用Promise.all等所有请求都完成后再处理结果
    return Promise.all(requestArr)
})
.then(htmlStrArr=>{
    // 所有请求都返回后，拼接字符串赋值给DOM
    const cartItems = htmlStrArr.join(" ")
    const content2 = document.querySelector('#content2');
    content2.innerHTML = cartItems;
})

内容的提问来源于stack exchange，提问作者quielfala