thông báo xử lý nền cho các yêu cầu $ http

Question

Tôi đang tìm cách "bọc" tất cả các yêu cầu $http để tôi có thể hiển thị hình ảnh gif bất cứ khi nào ứng dụng đang thực hiện một số xử lý. Tôi cũng muốn sử dụng cùng một giải pháp cho các loại xử lý nền khác chứ không chỉ là $http.

Lý do tại sao tôi yêu cầu là tôi luôn phải đặt processingIndicator thành true và sau đó chuyển lại chức năng success của mình không hoàn toàn thanh lịch.

Một giải pháp tiềm năng mà tôi thấy là sử dụng hàm có chức năng làm tham số. Hàm này sẽ đặt processingIndicator thành true, gọi hàm và sau đó đặt processingIndicator quay lại thành `false.

function processAjaxRequestSuccessFn(fooFn){ 
    // display processing indicator 
    fooFn(); 
    // hide processing indicator 
} 

Và sau đó

$http.get(...).then(processAjaxRequestSuccessFn, processAjaxRequestErrorFn) 

Giải pháp này không phải là rất thuận tiện vì mỗi khi tôi cần phải thông báo cho người dùng biết một cái gì đó đang xảy ra, tôi cần phải sử dụng chức năng này.

Tôi đang tìm cách tự động hóa quá trình này.

Bất kỳ ý tưởng nào khác?

Sau đó chỉnh sửa

Một ý tưởng tôi có là để mở rộng $http với riêng tôi get, post, vv Hoặc tạo ra một dịch vụ tùy chỉnh mà có hành vi tương tự. Nhưng vẫn không rất thanh lịch.

Answer 1

Sử dụng thiết bị chặn. Quan sát các ví dụ sau ...

app.factory('HttpInterceptor', ['$q', function ($q) { 
    return { 
     'request': function (config) { 
      /*...*/ 
      return config || $q.when(config); // -- start request/show gif 
     }, 
     'requestError': function (rejection) { 
      /*...*/ 
      return $q.reject(rejection); 
     }, 
     'response': function (response) {  // -- end request/hide gif 
      /*...*/ 
      return response || $q.when(response); 
     }, 
     'responseError': function (rejection) { 
      /*...*/ 
      return $q.reject(rejection); 
     } 
    }; 
}]); 

---

app.config(['$httpProvider', function ($httpProvider) { 
    $httpProvider.interceptors.push('HttpInterceptor'); 
    /*...*/ 
}]); 

Ở đây bạn có thể tiêm luận tập trung tại các điểm khác nhau trong chu kỳ http yêu cầu cuộc sống, hooking vào callbacks cung cấp được cung cấp bởi các api. Phác thảo bất kỳ logic yêu cầu tái sử dụng nào bạn có thể cần - chỉ cần làm như vậy ở đây. Kiểm tra phần đánh chặn của AngularJS $http docs để biết thêm thông tin.

Answer 2

Tôi đã quản lý thành công để sử dụng AngularOverlay để hiển thị chỉ báo tải trong khi yêu cầu http đang chờ xử lý. Tải xuống các tệp và làm theo hướng dẫn và tệp sẽ hoạt động.