javascript - 如何将对 XMLHttpRequest 的调用封装在 $q promise 中？

Question

我在 AngularJS ui-router 解析部分有以下代码。

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

如何将其封装在 $q promise 中，如果 http 请求有效，该 promise 将返回成功或失败？另外，我应该将所有这些都放在 promise 中还是只放在获取数据的部分中？

Answer 1

您需要将 xmlhttp.send(); 放入 Promise 中。使用 javascript 闭包来处理回调并解析 defer 对象，如下所示:

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

编辑使用该功能:

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