Question

我有以下代码：

/**
 * Simple method to create a XHR Request
 * @param url
 * @param callback
 * @param method
 * @returns {XMLHttpRequest}
 */
createXhr: function (url, callback, method) {
  if (!method) {
    method = 'GET';
  }

  var xhr = new XMLHttpRequest();
  xhr.addEventListener('load', callback);
  xhr.open(method, url, true);

  if (method === 'POST') {
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  }

  return xhr;
}

现在我在其他地方使用此代码，如下所示：

// XHR Requests:
this.accountXhr = utils.createXhr(
  this.account_url,
  this.accountXhrListener.bind(this),
  'POST'
);

现在我的HTML中有一个表单，可以在更改事件上触发XHR请求：

checkEmailAddress: function (component, evt) {
  this.accountXhr.send('email=' + encodeURIComponent(evt.target.value));
}

现在这段代码工作正常。至少，它在第一次通话时工作正常。一旦我更改输入字段并再次触发send() - 方法（使用不同的参数），控制台就会抛出以下错误：

Uncaught InvalidStateError: Failed to execute 'send' on 'XMLHttpRequest': The object's state must be OPENED.

有谁知道可能导致这种情况的原因？

编辑：在下面的评论之后，我向我的实例化XHR对象添加了一个新方法，如下所示：

// Add method that opens and send, so we can use the same XHR request to re-send requests:
xhr.openAndSend = function(method, url, data) {
  this.open(method, url);

  if (method === 'POST') {
    this.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  }

  this.send(data);
}.bind(xhr, method, url);

现在，如果我使用openAndSend()我可以 - 有点 - 多次使用send()，而不必每次都open()。不过，对我来说似乎很难看。我在这里错过了什么吗？或者这是实现这个目标的方法吗？

XMLHttpRequest：多次调用send（）会抛出InvalidStateError

0 个答案: