如何根据xmlhttp响应代码使用break退出while循环？

Question

    while (repoUrlLink != null && count < 90) {
        var xmlHttp = new XMLHttpRequest();
        xmlHttp.open('GET', repoUrlLink, false);
        xmlHttp.setRequestHeader('Authorization', 'Bearer ' + userData.accessToken);
        xmlHttp.onload = function () {
            if (xmlHttp.status != 200) {
                displayNoAccessMessage();
                break;
            }
            var result = JSON.parse(xmlHttp.responseText);
            if (result.length == 0) {
                displayNoRecordsMessage(); 
                break;                
            }
            var header = xmlHttp.getResponseHeader('link');
            if (header) {
                //doing something
            }
            else
                repoUrlLink = null;

            $.each(result, function (index, eachData) {
                // doing something with data
                count++;
            });
        }
        xmlHttp.send();
    }

一旦我显​​示错误，有没有更好的方法可以退出循环。break 语句不起作用。有什么回调有用吗？

Answer 1

正如有人在 cmets 中所说，您需要使用递归。这是因为 xmlHttp 是一个异步操作。当您调用send 时，浏览器会发送请求，然后继续执行代码，因此在调用 onload 函数时，跳出循环不再有效。此外，作为一个函数，onload 无法调用 break，因为 while 循环甚至不在同一范围内。

var count = 0;
var doXmlHttpCall = function() {

    var xmlHttp = new XMLHttpRequest();
    // additional setup code here
    xmlHttp.onload = function() {
        var errorFound = false;

        if (/* some error case */) {
            errorFound = true;
        }

        // process request

        if (count < 90 && !errorFound) {
            doXmlHttpCall();
        }
    }
}

doXmlHttpCall();

Answer 2

使用 Promise 重构代码的一些想法。

• 一个承诺的 XMLHttpRequest 请求函数getRepLink，它执行一个请求。它拒绝请求错误和 HTTP 错误（不是“200”状态）。

• 一个承诺的getSetOfRecords 函数，用于获取单个响应，将其解析为 JSON 数据并提取链接头值。如果没有记录，则拒绝。

• 一个承诺的进程记录函数，它尝试处理集合中给定数量的记录。它满足处理的记录数。如果某些记录已被处理，它会忽略无记录错误。

 // XMLHttp request

function getRepoLink (repUrlLink) {
    return new Promise( function (resolve, reject) {
        var xmlHttp = new XMLHttpRequest();
        xmlHttp.open('GET', repoUrlLink, false);
        xmlHttp.setRequestHeader('Authorization', 'Bearer ' + userData.accessToken);
        xmlHttp.onload = function () {
            if( xmlHttp.status == 200) {
                resolve( xmlHttp);
            }
            else {
                reject( new Error("HTTP error " + xmlHttp.status));
            }
        };
        xmlHttp.onerror = reject;
        xmlHttp.send();
    });
}


// get a set of records

const EndOfRecords = new Error( "End of Records");

function getSetOfRecords( repUrlLink) {
    return getRepoLink( repUrlLink).then(
        function( xmlHttp) {
            var result = JSON.parse(xmlHttp.responseText);
            if (result.length == 0) {
                 displayNoRecordsMessage();
                 throw EndOfRecords;  // reject the returned promise
            }
            var header = xmlHttp.getResponseHeader('link');
            return {result, header};  // fulfill the returned promise
        }
    );
}

// get up to `count` records and process them

 function processRecords( repUrlLink, count) {
    var processed = 0;
    function processSomeMore() {
        return getSetOfRecords().then( function ({result, header}) {
            $.each(result, function (index, eachData) {
              // do something with data
              processed++;
            });
            if( header) {
                 //do something with header
                 if( processed < count)
                     return processSomeMore() // asynchronous "recursion"
            }
            else {
                // do as required if no link header present.
            }
            return processed;  // fulfill returned promise
        },
        function( error) {
            if( error === EndOfRecords && processed > 0) {
                return processed; // got some records
            };
            throw error;  // reject returned promise
        });
    }
    return processSomeMore();
}

//  Start asynchronous operation

processRecords( repUrlLink, 90)
.then( processed => console.log( processed + " records processed"))
.catch( error => console.log( error));