JS调用Mixcloud API时循环末尾出现undefined问题求助

我在使用Mixcloud-Unfollowers项目时，调用Mixcloud API获取粉丝列表遇到两个问题：

• 分页请求到最后一页时，会出现undefined的username值
• 后续代码会提前执行，导致获取的列表数据不完整

相关代码如下：

// Get the JSON object - with number of followers and number of following +++++++++++++++++++++++++
$.getJSON('https://api.mixcloud.com/' + uname + '/?metadata=1', function (result) {

            // +++++ Get metadata from Mixloud
            var tfo = (result.follower_count);
            followercnt = parseInt(tfo);
            followingcnt = (result.following_count);

            // Show data
            $("#info").append('Followers:' + followercnt + ' <br />Following:' + followingcnt + '');

            // how often get 100x followers
            if (followercnt == "0") {
                $("#error").append('User was not found on Mixcloud<br /><br /><br /><br />');}
            var tempcnt = (followercnt / 100);
            var cnt = Math.ceil(tempcnt);

            // how often get 100x following
            if (followingcnt == "0") {
            $("#error").append('User was not found on Mixcloud<br /><br /><br /><br />'); }
            var tempcntb = (followingcnt / 100);
            var cntb = Math.ceil(tempcntb);


// ************* START *************
// 1 - get list of followers
getfolls(cnt, uname);

// 2 - get list of ppl you follow
getfollowing(cntb, uname);

});


// Get list of followers +++++++++++++++++++++++++
function getfolls(cnt, uname) {

                  for (var i = 0; i < cnt; i++) {
                          $.getJSON('https://api.mixcloud.com/' + uname + '/followers/?limit=' + lmt + '&offset=' + offst + '', function (result) {
                           //     console.log(JSON.stringify(result));
                                  // +++++ Get 100 packs of followers in the array
                                   var temp = '';
                                    var username = '';
                                   for (var r = 0; r < 100; r++) {
                                     var temp = (result.data[r].username);
                                     if (username == undefined) {
                                        console.log("there was an undefined user!");
                                     }
                                     follers[j] = temp;
                                     j++;
                                     $("#cntfollowers").text('Followers:' + j + ' ');
                                     console.log("temp followers: " + temp);
                               };
                             });
                  offst = (offst + 100);
                 };
  return follers
}

问题根源 #

1. 固定循环次数导致数组越界：Mixcloud API最后一页返回的data数组长度通常小于100，循环r < 100会访问超出数组范围的result.data[r]（值为undefined），进而获取username时得到undefined。
2. 异步请求与同步循环冲突：$.getJSON是异步请求，for循环会同步完成所有迭代，一次性发起所有分页请求，导致offst更新先于请求发送，部分请求的offset值错误；同时getfollowing会在getfolls的请求全部完成前执行，导致数据未完全获取就进入下一步。

解决方案 #

1. 根据返回数据实际长度遍历

替换固定循环次数，增加空值判断，避免访问无效数据：

// 替换原有的内层循环
for (var r = 0; r < result.data.length; r++) {
    var user = result.data[r];
    if (!user || !user.username) {
        console.log("跳过无效用户数据");
        continue;
    }
    var temp = user.username;
    follers[j] = temp;
    j++;
    $("#cntfollowers").text('Followers:' + j + ' ');
    console.log("temp followers: " + temp);
};

2. 异步串行处理分页请求

将同步循环改为递归调用，确保前一页请求完成后再发起下一页，同时等待粉丝数据获取完成后再执行getfollowing：

// 重构getfolls为异步函数，返回Promise
function getfolls(cnt, uname) {
    return new Promise((resolve) => {
        let currentOffset = 0;
        let currentPage = 0;

        function fetchPage() {
            if (currentPage >= cnt) {
                resolve(follers);
                return;
            }
            $.getJSON(`https://api.mixcloud.com/${uname}/followers/?limit=${lmt}&offset=${currentOffset}`, function (result) {
                // 处理当前页数据
                for (var r = 0; r < result.data.length; r++) {
                    var user = result.data[r];
                    if (!user || !user.username) {
                        console.log("跳过无效用户数据");
                        continue;
                    }
                    var temp = user.username;
                    follers[j] = temp;
                    j++;
                    $("#cntfollowers").text('Followers:' + j + ' ');
                    console.log("temp followers: " + temp);
                }
                currentPage++;
                currentOffset += 100;
                // 递归请求下一页
                fetchPage();
            });
        }

        fetchPage();
    });
}

// 调用时等待getfolls完成后再执行getfollowing
$.getJSON('https://api.mixcloud.com/' + uname + '/?metadata=1', function (result) {
    // 保留原有的元数据处理代码...

    // 先获取粉丝列表，完成后再获取关注列表
    getfolls(cnt, uname).then(() => {
        getfollowing(cntb, uname);
    });
});

3. 同步修复getfollowing函数

按照上述异步重构逻辑，对getfollowing函数做相同修改，确保关注数据也能正确获取。

内容的提问来源于stack exchange，提问作者post poop zoomies