javascript - Do/While XMLHttpRequest 将所有调用的结果添加到一个数组

Question

我需要使用类似于 &page=N 的标签循环遍历 N 个页面，从这些页面获取特定 ID，最后附加本地存储中对象保存的最终数组中缺少的值.

由于可能有一百多个页面或更多，我不能只执行 For 或 Do/While 循环，因为所有请求都会同时发生，从而使服务器不堪重负。

无论如何，我找到了一种解决方案，可以等待一个请求完成后再触发另一个请求。它按预期工作(但是我觉得这是一个巨大的解决方法，而不是一个好的解决方案)。

问题是，我希望每个请求将结果数组连接到所有已抓取页面的所有结果的“主数组”，我只想在所有请求运行后才将其与本地存储中的内容进行比较。但它并没有发生……按请求执行会更有意义吗？

代码如下:

function getUserRatings() {
    storage.get("userID", function(result) {
        if (!isEmpty(result)) {
            var pageNo = 1
            var finalArr = [];
            do {
                (function(cntr) {
                    let resp = requestRatings("https://www.page.com/user/" + result["userID"] + "/info/page-" + pageNo.toString() + "/");
                    resp.then((successMessage) => {
                        finalArr.concat(successMessage);
                        console.log("requestJSON(JSONURL) finished ", successMessage);
                        console.log("finalArr ongoing = ", finalArr);
                    });
                    pageNo++;
                })(pageNo);
            }
            while (pageNo <= 7); // temporary - need to replace this with sth like 'while any of the values in the returned array are not found in local storage array
        }
    });
}

function requestRatings(url) {
    console.log("requesting ratings");
    return new Promise(function (resolve, reject) {
        var xhr = new XMLHttpRequest();
        xhr.open('get', url);
        //xhr.setRequestHeader('Content-Type', 'application/json');
        xhr.onload = function () {
            var status = xhr.status;
            if (status == 200) {
                var rspns = xhr.responseText;
                var doc = new DOMParser().parseFromString(rspns, "text/html");
                //console.log(doc);
                var ratedList = doc.querySelectorAll('a[class~="specificClass"]');
                var arr = Array.prototype.map.call(ratedList, function (e) {return e.getAttribute('href').replace(/(?:.*?stuff\/|-[^$]+)/gm, '')});
                //console.log(arr);
                resolve(arr);
            } else {
                reject(status);
            }
        };
        xhr.send();
    });
}

我认为解决方法部分是function(cntr)，我也怀疑这就是我遇到的数组未连接问题的原因。

尽管 finalArr 变量在 do/while 循环之外声明，但它并未更新(可能是因为 concat 发生在单独的函数中？)。

.

这是我想要实现的完整解决方案:

• 逐个循环浏览页面，以免服务器不堪重负
• 捕获请求返回的数组
• 如果返回数组中的任何值已经存在于本地存储中保存的数组中，则停止循环(页面上的数据已排序，因此如果我遇到现有值，则意味着该值之后的所有值)已经存储，不需要再次抓取)
• 将返回的数组连接到主数组
• 从主数组中删除本地存储数组中已有的值
• 将更新后的主阵列追加到本地存储阵列

编辑:我弄清楚了如何一一执行http请求。不幸的是，请求不是按顺序运行的。有什么想法可以做到这一点吗？

Answer 1

我发现这有助于我处理顺序 http 请求 - 递归 - https://stackoverflow.com/a/55282152/4017077 .

我如何设置:

• 加载第一页，获取响应
• 从响应中获取所需的 ID 数组
• 将 ids 数组与存储数组连接起来
• 删除重复项(这是在保存所有 ID 并再次检查第一页(具有最新 ID)后的时间)
• 将其保存到本地存储
• 如果存储数组中不存在数组中的任何 id，则从函数内再次调用该函数，并使用 +1 页码