javascript - 重用 XMTHttpRequest 对象？

Question

我正在尝试重写一些 ajax 代码以使其更适合自动完成的需求。在这种情况下，有时您必须中止先前的请求xhr.abort()，因此重用该XMLHttpRequest对象（我刚刚xhr在这里调用）感觉很自然。

我试图了解重用该XMLHttpRequest对象是好主意还是坏主意。你能看出哪些优点和缺点？

PS：此重写将使用原生 ES6 风格的 Promise，因此它只能在较新的 Web 浏览器中运行。

Answer 1

正如@Bergi 建议的那样，只是一个时间测试：

function initCache(url) {
    var xhr = new XMLHttpRequest();
    xhr.open("get", url); xhr.send();
    console.log("Initialized cache");
}

function reuseXhr(url, numLoops) {
    var xhr = new XMLHttpRequest();
    for (var i=0; i<numLoops; i++) {
        xhr.open("get", url); xhr.send();
    }
    xhr.abort();
}

function newXhr(url, numLoops) {
    var xhr;
    for (var i=0; i<numLoops; i++) {
        xhr = new XMLHttpRequest();
        xhr.open("get", url); xhr.send(); xhr.abort();
    }
}
function testIt() {
    var url = "http://urlwithcors.com/"; // Pseudo-URL with CORS enabled
    var numLoops = 1000;
    initCache(url);
    setTimeout(function(){
        console.time("reuse"); reuseXhr(url, numLoops); console.timeEnd("reuse");
        console.time("new"); newXhr(url, numLoops); console.timeEnd("new");
    }, 5000);
}
testIt();

在 Chrome 中，这里的结果是：

test-xhr-reuse.js:6 XHR finished loading: GET ...
reuse: 510.000ms
new: 386.000ms

所以......在慢速电脑上每次调用 0.1 毫秒，这不值得麻烦......

现在等待 - 重用 xhr 甚至更慢......不值得。;-)

多一点测试表明根本没有区别。这只是一个机会问题。