feat($http): implement mechanism for coalescing calls to $apply in $http

When multiple responses are received within a short window from each other, it can be wasteful to
perform full dirty-checking cycles for each individual response. In order to prevent this, it is
now possible to coalesce calls to $apply for responses which occur close together.

This behaviour is opt-in, and the default is disabled, in order to avoid breaking tests or
applications.

In order to activate coalesced apply in tests or in an application, simply perform the following
steps during configuration.

   angular.module('myFancyApp', []).
     config(function($httpProvider) {
       $httpProvider.coalescedApply(true);
     });

OR:

   angular.mock.module(function($httpProvider) {
     $httpProvider.coalescedApply(true);
   });

Author: caitp

src/ng/http.js

@@ -143,6 +143,30 @@ function $HttpProvider() {
     xsrfHeaderName: 'X-XSRF-TOKEN'
   };
 
+  var coalesceApply = false;
+  /**
+   * @ngdoc method
+   * @name $httpProvider#coalesceApply
+   * @description
+   *
+   * Configure $http requests to coalesce calls to $apply() for requests which are loaded close
+   * together. Defaults to false. If no value is specifed, returns the current configured value.
+   *
+   * @param {boolean=} value If true, when requests are loaded, they will schedule a deferred
+   *    "apply" on the next tick, giving time for subsequent requests in a roughly ~10ms window
+   *    to load and share the same digest cycle.
+   *
+   * @returns {boolean|Object} If a value is specified, returns the $httpProvider for chaining.
+   *    otherwise, returns the current configured value.
+   **/
+  this.coalesceApply = function(value) {
+    if (isDefined(value)) {
+      coalesceApply = !!value;
+      return this;
+    }
+    return coalesceApply;
+  }
+
   /**
    * Are ordered by request, i.e. they are applied in the same order as the
    * array, on request, but reverse order, on response.
@@ -949,8 +973,12 @@ function $HttpProvider() {
           }
         }
 
-        resolvePromise(response, status, headersString, statusText);
-        if (!$rootScope.$$phase) $rootScope.$apply();
+        if (coalesceApply) {
+          $rootScope.$$applyAsync(bind(null, resolvePromise, response, status, headersString, statusText));
+        } else {
+          resolvePromise(response, status, headersString, statusText);
+          if (!$rootScope.$$phase) $rootScope.$apply();
+        }
       }
 
 

src/ngMock/angular-mocks.js

@@ -1480,11 +1480,11 @@ function createHttpBackendMock($rootScope, $delegate, $browser) {
    *   all pending requests will be flushed. If there are no pending requests when the flush method
    *   is called an exception is thrown (as this typically a sign of programming error).
    */
-  $httpBackend.flush = function(count) {
-    $rootScope.$digest();
+  $httpBackend.flush = function(count, digest) {
+    if (digest !== false) $rootScope.$digest();
     if (!responses.length) throw new Error('No pending request to flush !');
 
-    if (angular.isDefined(count)) {
+    if (angular.isDefined(count) && count !== null) {
       while (count--) {
         if (!responses.length) throw new Error('No more pending request to flush !');
         responses.shift()();
@@ -1494,7 +1494,7 @@ function createHttpBackendMock($rootScope, $delegate, $browser) {
         responses.shift()();
       }
     }
-    $httpBackend.verifyNoOutstandingExpectation();
+    $httpBackend.verifyNoOutstandingExpectation(digest);
   };
 
 
@@ -1512,8 +1512,8 @@ function createHttpBackendMock($rootScope, $delegate, $browser) {
    *   afterEach($httpBackend.verifyNoOutstandingExpectation);
    * ```
    */
-  $httpBackend.verifyNoOutstandingExpectation = function() {
-    $rootScope.$digest();
+  $httpBackend.verifyNoOutstandingExpectation = function(digest) {
+    if (digest !== false) $rootScope.$digest();
     if (expectations.length) {
       throw new Error('Unsatisfied requests: ' + expectations.join(', '));
     }

test/ng/httpSpec.js

@@ -1526,3 +1526,86 @@ describe('$http', function() {
     $httpBackend.verifyNoOutstandingExpectation = noop;
   });
 });
+
+
+describe('$http with coalesced $apply', function() {
+  var $http, $httpBackend, $rootScope, $browser;
+  beforeEach(module(function($httpProvider) {
+    $httpProvider.coalesceApply(true);
+  }));
+
+
+  beforeEach(inject(['$http', '$httpBackend', '$rootScope', '$browser', function(http, backend, scope, browser) {
+    $http = http;
+    $httpBackend = backend;
+    $rootScope = scope;
+    $browser = browser;
+    spyOn($rootScope, '$apply').andCallThrough();
+    spyOn($rootScope, '$$applyAsync').andCallThrough();
+    spyOn($rootScope, '$digest').andCallThrough();
+    spyOn($browser.defer, 'cancel').andCallThrough();
+  }]));
+
+
+  it('should schedule coalesced apply on response', function() {
+    var handler = jasmine.createSpy('handler');
+    $httpBackend.expect('GET', '/template1.html').respond(200, '<h1>Header!</h1>', {});
+    $http.get('/template1.html').then(handler);
+    // Ensure requests are sent
+    $rootScope.$digest();
+
+    $httpBackend.flush(null, false);
+    expect($rootScope.$$applyAsync).toHaveBeenCalledOnce();
+    expect(handler).not.toHaveBeenCalled();
+
+    $browser.defer.flush();
+    expect(handler).toHaveBeenCalledOnce();
+  });
+
+
+  it('should combine multiple responses within short time frame into a single $apply', function() {
+    var a = [];
+    var handler1 = jasmine.createSpy('response 1').andCallFake(function() { a.push('response 1'); });
+    var handler2 = jasmine.createSpy('response 2').andCallFake(function() { a.push('response 2'); });
+    $httpBackend.expect('GET', '/template1.html').respond(200, '<h1>Header!</h1>', {});
+    $httpBackend.expect('GET', '/template2.html').respond(200, '<p>Body!</p>', {});
+
+    $http.get('/template1.html').then(handler1);
+    $http.get('/template2.html').then(handler2);
+    // Ensure requests are sent
+    $rootScope.$digest();
+
+    $httpBackend.flush(null, false);
+    expect(a).toEqual([]);
+
+    $browser.defer.flush();
+    expect(a).toEqual(['response 1', 'response 2']);
+  });
+
+
+  it('should handle pending responses immediately if a digest occurs on $rootScope', function() {
+    var a = [];
+    var handler1 = jasmine.createSpy('response 1').andCallFake(function() { a.push('response 1'); });
+    var handler2 = jasmine.createSpy('response 2').andCallFake(function() { a.push('response 2'); });
+    var handler3 = jasmine.createSpy('response 3').andCallFake(function() { a.push('response 3'); });
+    $httpBackend.expect('GET', '/template1.html').respond(200, '<h1>Header!</h1>', {});
+    $httpBackend.expect('GET', '/template2.html').respond(200, '<p>Body!</p>', {});
+    $httpBackend.expect('GET', '/template3.html').respond(200, '<p>Body!</p>', {});
+
+    $http.get('/template1.html').then(handler1);
+    $http.get('/template2.html').then(handler2);
+    $http.get('/template3.html').then(handler3);
+    // Ensure requests are sent
+    $rootScope.$digest();
+
+    // Intermediate $digest occurs before 3rd response is received, assert that pending responses 
+    /// are handled
+    $httpBackend.flush(2);
+    expect(a).toEqual(['response 1', 'response 2']);
+
+    // Finally, third response is received, and a second coalesced $apply is started
+    $httpBackend.flush(null, false);
+    $browser.defer.flush();
+    expect(a).toEqual(['response 1', 'response 2', 'response 3']);
+  });
+});