XHR'ye Angular ile $ http arasında nasıl erişilir?

Question

Şu anda yükleme işlevini Angular ile uygulamaya çalışıyorum. İlk başta XmlHttpRequest kullandım ama daha sonra $ http olarak değiştirdim. Bu yüzden, $ http ile bir ilerleme çubuğu oluşturmak için XmlHttpRequest'e erişemediğimi öğrendim. Aşağıda benim kodum. Resimler yüklenirken bir ilerleme çubuğu oluşturma hakkında herhangi bir öneriniz var mı? Teşekkürler.

$http({ 
      method: 'POST', 
      url: upload_url, 
      data: fd, 
      headers: {'Content-Type': undefined}, 
      transformRequest: angular.identity 
      }) 

Answer 1

Bu hizmet verebilmemiz: Burada

  $http.post('http://url.com', {parameter1:'parameter', parameter2: 'secondparameter'}).success(function (result) { 
       console.log(result.data); 
      }).error(function(data, status, headers, config) { 
       console.log(status); 
      })); 

Answer 2

xhr nesne alma yolu:

http://boylesoftware.com/blog/angular-tip-using-the-xmlhttprequest-object/

Kopyala/Yapıştır:

Normalde, bir angularjs uygulama $ http servi kullanır ce arka uç servislerini çağırır. Ancak, bazen, alttaki XMLHttpRequest nesnesine erişim sahibi olmak isteriz. Ben bir birkaç kullanım vakası ile gelebilir, ancak en önemli olanı, bir dosya yükleme gibi uzun bir isteğin izini izleyebilmesidir. Bunu yapmak için , için XMLHttpRequest nesnesine bir olay dinleyicisi kaydettirmeliyiz. Bu olay, "devam etmekte olan" olaydır. Şaşırtıcı bir şekilde, Angular'ın $ hizmeti, XMLHttpRequest nesnesinin altını hiçbir şekilde göstermez. Yani, yaratıcı olmalıyız. İşte bunu yapmanın bir yolu…

$ http hizmetinin yapılandırma nesnesi, üstbilgileri HTTP isteğine "üstbilgiler" özelliği aracılığıyla eklememize olanak sağlar. Bu, $ http değerinde bazı noktaların, bu üstbilgileri kullandığı XMLHttpRequest nesnesine yerleştirmesi gerektiği anlamına gelir. Bunu yapmanın yolu, XMLHttpRequest’in setRequestHeader yöntemini kullanmaktır. Buradaki fikir, XMLHttpRequest’in prototipindeki setRequestHeader yöntemini geçersiz kılmak ve bir kancayı tanıtmak için özel bir başlık adı kullanmaktır. biz $ http servis çağrı yaptığınızda

Şimdi

angular.module("bsworksXHR", []).config([ 
    function() { 
     XMLHttpRequest.prototype.setRequestHeader = (function(sup) { 
      return function(header, value) { 
       if ((header === "__XHR__") && angular.isFunction(value)) 
        value(this); 
       else 
        sup.apply(this, arguments); 
      }; 
     })(XMLHttpRequest.prototype.setRequestHeader); 
    } 
]); 

, biz adında bir başlık ekleyebilirsiniz: Kullanıcı bu başlayalım ve yapılandırma aşamasında yöntem değiştirme gerçekleştirir basit Açısal modül oluşturmak XMLHttpRequest nesnesini tek argümanı olarak alacak bir işlev değerine sahip “XHR”. Örneğin, başka bir yerde uygulamasında:

$http({ 
    … 
    headers: { 
     … 
     __XHR__: function() { 
      return function(xhr) { 
       xhr.upload.addEventListener("progress", function(event) { 
        console.log("uploaded " + ((event.loaded/event.total) * 100) + "%"); 
       }); 
      }; 
     }, 
     … 
    }, 
    … 
}).success(…); 

Umarım, angularjs gelecekteki sürümlerinde böyle olarak, sınırlı bile olsa, düşük seviyeli XMLHttpRequest nesnesine erişmek için bazı resmi şekilde içerecektir Olay dinleyicilerini kaydettirebilir veya XMLHttpRequest olaylarını Angular olaylarına çevirebilir. O zamana kadar, uygulamalarımda yukarıdaki yaklaşımını kullanıyorum.