如何在fetch()请求中传递自定义数据并随响应返回？

你不需要通过Last.FM API传递额外数据，前端层面就能把循环变量关联到对应的fetch响应回调里，核心是解决异步回调的变量作用域问题，同时动态生成目标元素ID。

问题根源 #

原代码用var n声明循环变量，var是函数级作用域，异步的fetch回调执行时，循环已经跑完，n的值会固定为arrayLength，导致所有回调都用同一个值，而且硬编码的pic1也无法对应到不同循环项。

修复方案1：使用let声明循环变量（推荐） #

let是块级作用域，for循环每次迭代都会创建一个新的n变量，异步回调能捕获到当前迭代的正确值：

for (let n = 0; n < arrayLength; n++) {
    console.log('Just inside arrayLength for loop');
    console.log('Search term '+ n +' = ' + lines[n]);

    fetch(`https://ws.audioscrobbler.com/2.0?method=album.search&album=${lines[n]}&api_key=${lastfm_apikey}&format=json`)
        .then((response) => response.json())
        .then((data) => {
            console.log('n: ' + n);
            const albumArtURL = data.results.albummatches.album[0].image[3]['#text'];
            console.log('albumArtURL: ' + albumArtURL);
            // 动态生成元素ID，比如pic1、pic2...对应n+1
            document.getElementById(`pic${n + 1}`).src = albumArtURL;
        })
        .catch((error) => {
            console.log('Error returned: ' + error);
        });
}

修复方案2：闭包包裹（兼容旧环境） #

如果因为环境限制不能用let，可以用立即执行函数（IIFE）把当前迭代的n封装成闭包变量：

for (var n = 0; n < arrayLength; n++) {
    console.log('Just inside arrayLength for loop');
    console.log('Search term '+ n +' = ' + lines[n]);

    // 用IIFE捕获当前n的值
    (function(currentN) {
        fetch(`https://ws.audioscrobbler.com/2.0?method=album.search&album=${lines[currentN]}&api_key=${lastfm_apikey}&format=json`)
            .then((response) => response.json())
            .then((data) => {
                console.log('n: ' + currentN);
                const albumArtURL = data.results.albummatches.album[0].image[3]['#text'];
                console.log('albumArtURL: ' + albumArtURL);
                document.getElementById(`pic${currentN + 1}`).src = albumArtURL;
            })
            .catch((error) => {
                console.log('Error returned: ' + error);
            });
    })(n);
}

关键说明 #

• 不需要依赖API返回额外数据，通过JS的作用域/闭包就能把循环变量和回调绑定，完全在前端处理。
• 动态生成ID时，根据你的元素命名规则调整pic${n+1}，比如如果元素是pic0开头就直接用pic${n}。

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