使用$ http訪問原始XHR對象

Question

我需要訪問原始XMLHttpRequest對象以在支持它的瀏覽器上添加文件上載進度回調。這是可能的，還是我必須自己構建原始請求？如果是這樣，我該如何將原始XMLHttpRequest包裝在承諾對象中？

Answer 1

我模擬$http調用構造定製XMLHttpRequest像這樣：

uploadFile(file, progressHandler) { 
    var xhr = new XMLHttpRequest(), 
     deferred = $q.defer(); 

    xhr.open("POST", "your/path", true); // method, url, async 
    xhr.setRequestHeader("Content-Type", file.type || "application/octet-stream"); 
    xhr.onreadystatechange = function (e) { 
    if (xhr.readyState == 4) { 
     $rootScope.$apply(function() { 
     // Construct a response object similar to a regular $http call 
     // 
     // data – {string|Object} – The response body transformed with the transform functions. 
     // status – {number} – HTTP status code of the response. 
     // headers – {function([headerName])} – Header getter function. 
     // config – {Object} – The configuration object that was used to generate the request. 
     var r = { 
      data: xhr.response, 
      status: xhr.status, 
      headers: xhr.getResponseHeader, 
      config: {} 
     }; 
     if (r.status == 200) { 
      deferred.resolve(r); 
     } else { 
      deferred.reject(r); 
     } 
     }); 
    } 
    }; 
    if (progressHandler && xhr.upload) { 
    xhr.upload.addEventListener('progress', function(e) { 
     progressHandler((e.loaded/e.total), e); 
    }, false); 
    } 
    // This is only available in XHR2, provide multipart fallback 
    // if necessary 
    xhr.send(file); 

    return deferred.promise; 
}