javascript - 如何为 XMLHttpRequest 设置超时和 ontimeout？

Question

目前，在创建 XMLHttpRequest 实例时，我正在使用下面可见的类似代码为 timeout 设置特定值。 我还为 ontimeout 设置了一个函数，它将在触发事件时执行。

我想知道是否可以为任何 XMLHttpRequest 全局设置一个 timeout 值，并在调用 ontimeout 时设置一个全局函数.

我知道我可以为 XMLHttpRequest 使用一个工厂，它可以在每个创建的实例上自动设置 timeout 和 ontimeout 但我想知道是否存在不同的方法。

注意:我正在寻找基于 vanilla JavaScript 的解决方案(没有 jQuery 或其他库)并且我只针对 Chrome 和 FireFox 最新版本。

欢迎任何想法，谢谢。

var xhr = new XMLHttpRequest();
xhr.open('GET', '/server', true);
xhr.timeout = 2000;  
xhr.onload = function () {};   
xhr.ontimeout = function (e) {
    // do smt here
}; 
xhr.send(null);

Answer 1

您至少有三个选择:

1. 将您对 XMLHttpRequest 的使用封装在您自己的函数中。这让你可以在那个函数中应用这些东西。您的代码使用该函数这一事实使它非常清楚发生了什么。例如:

   function createXHR() {
       var xhr = new XMLHttpRequest();
       xhr.timeout = 2000;  
       xhr.addEventListener("timeout", function(e) {
           // ...
       });
       return xhr;
   }
   

2. 用您自己的版本覆盖 XMLHttpRequest。 我不建议这样做，但有时如果您需要与直接使用 XMLHttpRequest 的代码集成，您可能会觉得有必要这样做。示例:

   (function() {
       var realXMLHttpRequest = XMLHttpRequest;
       XMLHttpRequest = function fakeXMLHttpRequest() {
           realXMLHttpRequest.apply(this, arguments);
           this.timeout = 2000;  
           this.addEventListener("timeout", function(e) {
               // ...
           });
       };
       XMLHttpRequest.prototype = realXMLHttpRequest.prototype;
   })();
   

   同样，我不推荐，但这是可能的。

   您在下面说过上面的方法不适合您。如果没有，那是因为您正在使用的 XMLHttpRequest 实现让生活变得困难。此解决方法将起作用:

   (function() {
       var realXMLHttpRequest = XMLHttpRequest;
       XMLHttpRequest = function fakeXMLHttpRequest(arg) {
           var xhr;
           if (typeof arg !== "undefined") {
               // Some implementations allow for a non-standard argument, support them
               xhr = new realXMLHttpRequest(arg);
           } else {
               // Normal case
               xhr = new realXMLHttpRequest();
           }
           xhr.timeout = 2000;  
           xhr.addEventListener("timeout", function(e) {
               // ...
           });
           return xhr;
       };
       XMLHttpRequest.prototype = realXMLHttpRequest.prototype;
   })();
   

   即使您使用 new XMLHttpRequest 调用它，它仍然有效，因为 new 运算符的工作方式是它创建一个对象并使用该对象调用函数作为 this，然后 new 的结果是该对象除非该函数返回一个不同的非null 对象，因为上面一个是。

   我有没有提到我不推荐这个？ ;-)

3. 使用已经为您做到第一的图书馆。