Cách truy cập XHR bằng $ http với Angular?

Question

Hiện tại tôi đang cố triển khai chức năng tải lên bằng Angular. Lúc đầu, tôi đã sử dụng XmlHttpRequest nhưng sau đó tôi đã đổi nó thành $ http. Vì vậy, tôi thấy rằng tôi không thể truy cập vào XmlHttpRequest để tạo thanh tiến trình với $ http. Dưới đây là mã của tôi. Bất kỳ đề xuất nào về việc tạo thanh tiến trình khi tải lên hình ảnh? Cảm ơn.

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

Answer 1

này có thể phục vụ quý khách:

  $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

Đây là cách để nhận được đối tượng XHR:

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

Copy/Paste:

Thông thường, một AngularJS ứng dụng sử dụng servi $ http ce để thực hiện các cuộc gọi đến các dịch vụ back-end . Đôi khi, tuy nhiên, chúng tôi muốn có quyền truy cập vào đối tượng XMLHttpRequest cơ bản. Tôi có thể đưa ra một số trường hợp sử dụng nhưng trường hợp nổi bật nhất có thể là tiến trình theo dõi yêu cầu dài, chẳng hạn như tải tệp lên. Để làm điều đó, , chúng ta cần phải đăng ký trình xử lý sự kiện trên đối tượng XMLHttpRequest cho sự kiện đang diễn ra. ”Thật ngạc nhiên là dịch vụ $ http của Angular không có cách nào hiển thị đối tượng XMLHttpRequest cơ bản. Vì vậy, chúng ta phải sáng tạo. Đây là một cách để làm điều đó…

Đối tượng cấu hình của dịch vụ $ http cho phép chúng tôi thêm tiêu đề vào yêu cầu HTTP thông qua thuộc tính “tiêu đề” của nó. Điều đó có nghĩa là tại một số điểm $ http phải đặt các tiêu đề đó trên đối tượng XMLHttpRequest mà nó sử dụng. Cách để làm điều đó là sử dụng phương thức setRequestHeader của XMLHttpRequest. Vì vậy, ý tưởng là ghi đè phương thức setRequestHeader trên mẫu thử nghiệm của XMLHttpRequest và sử dụng tên tiêu đề đặc biệt để giới thiệu một móc. Hãy bắt đầu với điều đó và tạo ra một mô-đun góc đơn giản mà thực hiện các phương pháp thay thế trong giai đoạn cấu hình của nó:

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

Bây giờ, khi chúng tôi thực hiện cuộc gọi $ http dịch vụ, chúng ta có thể thêm một tiêu đề gọi “XHR” với một giá trị hàm sẽ nhận đối tượng XMLHttpRequest làm đối số duy nhất của nó. Ví dụ, ở một nơi khác trong ứng dụng:

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

Hy vọng rằng, các phiên bản tương lai của AngularJS sẽ bao gồm một số cách chính thức để truy cập đối tượng XMLHttpRequest ở mức độ thấp, thậm chí nếu giới hạn, chẳng hạn như là có thể đăng ký người nghe sự kiện hoặc dịch sự kiện XMLHttpRequest thành sự kiện Góc. Cho đến lúc đó, tôi đang sử dụng phương thức ở trên trong ứng dụng của mình.