构造函数(JS)中的增量变量

Question

我正在获取来自2个不同API的数据，我编写了一个构造函数函数，该函数将根据对象创建的新实例启动XMLHTTPRequest（如果有任何意义...）。获取数据并解析数据后，我想将其保存到不同的命名变量中。例如：试验1DATA，试验2 Data。在当时，对象的新实例覆盖数据变量。下面的代码：

var api = "http://www.filltext.com/?rows=10&fname={firstName}&lname={lastName}&pretty=true";
var api2 = "http://www.filltext.com/?rows=10&fname={firstName}&lname={lastName}&tel={phone|format}&address={streetAddress}&city={city}&state={usState|abbr}&zip={zip}&pretty=true";
function FetchData(apiType) {
    var r = new XMLHttpRequest();
    this.apiType = apiType;
    this.request = function() {
        r.open("GET", apiType, true);
        r.onload = function() {
        var data = JSON.parse(r.responseText);
        }
        r.send(null);
    }
}
trial1 = new FetchData (api);
trial1.request();
trial2 = new FetchData (api2);
trial2.request();

感谢您的xmlhttprequest提示，但是问题是将每个数据保存到诸如trial1data和trial2data之类的单独变量中（或其他具有含义的东西，我以后可以重复使用），根据多少新对象）我将创建。

Answer 1

您的var r = new XMLHttpRequest();很常见。

您需要在函数中移动它以每次调用构造函数函数时创建单独的请求。

function FetchData(apiType) {
    this.apiType = apiType;
    this.request = function() {
        var r = new XMLHttpRequest();
        r.open("GET", apiType, true);
        r.onload = function() {
           var data = JSON.parse(r.responseText);
           console.log(data);
        }
        r.send(null);
    }
}

Answer 2

您应该将请求对象创建放在构造函数中：

function FetchData(apiType) {
  var r = new XMLHttpRequest();
  this.apiType = apiType;
  this.done = new Promise( res => {
    r.onload = function() {
      res(JSON.parse(r.responseText) );          
    };
  });
  this.request = function() {
    r.open("GET", apiType, true);
    r.send(null);
  }; 
}

因此您可以做：

const req = new FetchData("whatever");
req.request();
req.done.then(console.log);

Answer 3

在var r = new xmlhttprequest（）上创建新实例（）;在构造函数的内部或作为更好的方法，将其作为每个构造函数的参数，并为每个构造函数注入新的XMLHTTPRequets对象。

要回答问题的第二部分，您可以将响应数据存储在对象的属性中，并直接访问它或Getter接口。所以而不是

 r.onload = function() {
    var data = JSON.parse(r.responseText);
 }

做类似：

的事情

function FetchData(apiType) {
  var self = this;
  this.apiType = apiType;
  this.request = function() {
    var r = new XMLHttpRequest(); 
    return new Promise(function(resolve, reject) {
      r.open("GET", apiType, true);
      r.onload = function() {
        self.data = JSON.parse(r.responseText);
        resolve(self.data);
      }
      r.send(null);
    }   
}

然后

trial1 = new FetchData (api);
var trial1resp;
trial1.request().then(function(data) {
   trial1resp = data;
}

最后一个分配只是为了显示如何存储响应。您必须处理异步过程以实现您的目标。

您可以在此处阅读更多有关纸张以及如何处理XHR ASYNC任务的更多信息。