0

I'm writing a Chrome extension, and I have the following function for grabbing data from a URL:

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();
}

In another file I have var someHTMLContent = getContentFromURL(chrome.extension.getURL('client/views/aPage.html'));.

When I output the xmlhttp.responseText (see commented line), I get the expected data, but when I log out someHTMLContent, it returns undefined. After some experimentation, I discovered that if I set the async flag to false and return the responseText after xmlhttp.send(), my code works. I don't want to do that, however, because it's detrimental to the user experience.

Can someone shed some light on this for me?

EDIT: I tried using the answer here, and came up with the following code:

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();
  });
}

and

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

Now, however, I get an ERR_EMPTY_RESPONSE after about 30 seconds.

Community
  • 1
  • 1
Matt
  • 2,576
  • 6
  • 34
  • 52
  • just an observation ... `I'm writing a Chrome extension` ... yet you check for IE5/6 specific stuff ... redundant – Jaromanda X Feb 04 '16 at 22:43
  • @JaromandaX I'm actually editing a previous developer's code, and haven't gotten around to removing that yet. – Matt Feb 04 '16 at 22:44
  • xmlhttprequest is asynchronous ... `return xmlhttp.responseText;` doesn't return a value from your function - you need a callback (or promise) to work with asynchronous code – Jaromanda X Feb 04 '16 at 22:45
  • the `previous developer` had no clue about asynchronous code then - that code wouldn't work anywhere – Jaromanda X Feb 04 '16 at 22:50
  • Using a promise doesn't stop the code from being asynchronous. It just gives you an object that you can bind callbacks to later on. You still can't return from it. – Quentin Feb 04 '16 at 23:21
  • @Quentin so how do I get a returned object then? – Matt Feb 04 '16 at 23:22
  • Which bit of "can't" was unclear? – Quentin Feb 04 '16 at 23:22
  • Alright, let me ask it this way: how do I bind a callback to it in a way that allows me to assign the result of the `XMLHttpRequest` to a variable? – Matt Feb 04 '16 at 23:24
  • @Matt — `var someVar = xmlhttp.responseText`. Keeping in mind that the **time** the function executes prevents you from getting the value immediately after *sending* the request. – Quentin Feb 05 '16 at 09:50

0 Answers0