如何在$ q promise中封装对XMLHttp Request的调用？

Question

I have the following code in an AngularJS ui-router resolve section.

var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", "/Scripts/Pages/Home.js", false);
xmlhttp.setRequestHeader("X-Custom-Header", "My Values");
xmlhttp.send();
var m = document.createElement('script');
m.appendChild(document.createTextNode(xmlhttp.responseText));
document.getElementsByTagName('head')[0].appendChild(m);

How can I encapsulate this in a $q promise that will return a success or fail if the http request worked? Also should I place all of this inside a promise or just the part that is getting data?

Answer 1

You need to place xmlhttp.send(); inside a promise. use javascript closure to handle callback and resove the defer object as follows:

function sendRequest($q){
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", "/Scripts/Pages/Home.js", false);
xmlhttp.setRequestHeader("X-Custom-Header", "My Values");

var defer = $q.defer();
xmlhttp.onreadystatechange = (function(xmlhttp, def) {
    return function() {
   if (xmlhttp.readyState==4)
        {
           if (xmlhttp.status==200)
            {
                def.resolve(xmlhttp)
            }
            else
            {
                def.reject(xmlhttp);
            }
        }

    }
})(xmlhttp, defer);
xmlhttp.send();
return defer.promise;
}

EDIT using the function:

    sendRequest($q).then(function(xmlHttp){
        var m = document.createElement('script');
        m.appendChild(document.createTextNode(xmlhttp.responseText));
        document.getElementsByTagName('head')[0].appendChild(m);
        }
      ,function(xmlHttp){
       //error
    }
);