JS使用fetch+forEach调用Dog CEO接口实现狗图渲染问题求助

原有代码的错误点 #

• addEventListener的第二个参数需要传入回调函数，你直接写了对象{}属于语法错误
• 获取图片容器的ID写错，HTML中对应的容器ID是dog-image-container，不是div
• 你只在全局创建了1个img元素，应该遍历每张图片url时单独创建新的img元素
• 接口返回的JSON结构中，图片数组存在message字段里，不能直接遍历返回的整个JSON对象
• appendChild的父子关系写反了，应该是父容器.appendChild(子img元素)，你写反了插入顺序
• 第二个then的语法错误，缺少接收返回值的参数

正确实现代码（可直接写入index.js） #

// 监听DOM加载完成事件
document.addEventListener('DOMContentLoaded', function() {
    const imgUrl = "https://dog.ceo/api/breeds/image/random/4"
    // 先获取要插入图片的父容器
    const imgContainer = document.getElementById('dog-image-container')

    // 调用fetch请求接口
    fetch(imgUrl)
    .then(res => res.json()) // 把响应转成JSON格式
    .then(data => {
        // 接口返回的data里message字段才是图片url的数组，遍历这个数组
        data.message.forEach(imgUrlItem => {
            // 每次遍历都创建一个新的img标签
            const imgElement = document.createElement('img')
            // 给img标签设置src属性为当前遍历到的图片url
            imgElement.src = imgUrlItem
            // 可选：给图片加个样式限制大小，避免太大
            imgElement.style.width = '200px'
            imgElement.style.margin = '10px'
            // 把img插入到父容器里
            imgContainer.appendChild(imgElement)
        })
    })
})

核心逻辑说明 #

1. 所有DOM操作都放在DOM加载完成的回调里执行，避免出现获取不到元素的问题
2. 提前获取要插入图片的容器，不要在循环里重复获取减少性能损耗
3. 拿到接口返回数据后先确认结构再使用，这个dog.ceo的接口返回的结构是{message: 图片url数组, status: 'success'}，所以要取data.message遍历
4. 遍历每一个图片url的时候，单独创建新的img元素，设置对应的src后再插入到容器中即可生效

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