Question

我正在编写Chrome扩展程序，我有以下功能来从网址抓取数据：

function getContentFromURL(theUrl) {
  var xmlhttp = null;
  if (window.XMLHttpRequest) {
    xmlhttp = new XMLHttpRequest();
  } else {// code for IE6, IE5
    xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
  }
  xmlhttp.timeout = 10;
  xmlhttp.open('GET', theUrl, true);
  xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
      // console.log(xmlhttp.responseText);
      return xmlhttp.responseText;
    }
  };
  xmlhttp.send();
}

在另一个文件中，我有var someHTMLContent = getContentFromURL(chrome.extension.getURL('client/views/aPage.html'));。

当我输出xmlhttp.responseText（参见注释行）时，我会得到预期的数据，但是当我退出someHTMLContent时，它会返回undefined。经过一些实验，我发现如果我将async标志设置为false并在xmlhttp.send()之后返回responseText，我的代码就可以了。但是，我不想这样做，因为它是detrimental to the user experience。

有人可以为我阐明这个吗？

修改我尝试使用答案here，并提出以下代码：

function getContentFromURL(theUrl) {
  return new Promise(function(resolve, reject) {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onload = function() {
      if (xmlhttp.status === 200) {
        resolve(xmlhttp.responseText);
      } else {
        reject(xmlhttp.statusText);
      }
    };
    xmlhttp.onerror = function() {
      reject(console.error('Network Error'));
    };
    xmlhttp.open('GET', theUrl);
    xmlhttp.send();
  });
}

和

var someHTMLContent = getContentFromURL(chrome.extension.getURL('client/views/aPage.html')).then(    function(result) {
  return result;
}).catch(function(err) {
  console.error(err);
});

然而，现在，我在大约30秒后得到ERR_EMPTY_RESPONSE。

将变量设置为XMLHttpRequest响应将返回undefined

0 个答案: