angular $http service singleton clash

Question

$http service in angular is singleton, and my previous experience with xhr/ ajax request shown to have clash when two request share the same xhr object. Should it not a problem with angular ? if yes how angular handles such situation ?

Answer 1

$http requests are async and return a promise with methods success() and error(). Below more information ($q service, which is an implementation of promises by Angularjs):

"A service that helps you run functions asynchronously, and use their return values (or exceptions) when they are done processing"

Read here:

• https://docs.angularjs.org/api/ng/service/$http
• https://docs.angularjs.org/api/ng/service/$q

Answer 2

I think you're misunderstanding the fact that the $http service is a singleton to mean that all requests somehow will share the same XHR object. They don't.

The $http service itself is a singleton, but that doesn't mean that the requests share the same XHR object.

Anytime you call an $http service method (for example, $http#get), it initializes a new asynchronous request... However, it doesn't initialize a new $http object.

Take a look at some of Addy Osmani's sample code for the singleton pattern:

  return {
    getInstance: function () {

      if ( !instance ) {
        instance = init();
      }

      return instance;
    }
  };

The singleton pattern simply ensures that a new instance of the $http service itself doesn't get initiliazed over and over again... But it doesn't mean there is just one XHR object.

The pseudo-code for the $http service would look something like this:

var $httpProvider = (function() {
  var somePrivateConfig = "something important";

  var service = {
    request: function() {
      // make an HTTP request with an XHR object
    }
  };

  return {
    init: function() {
      // this is the important part that makes sure its a singleton
      window.$http = window.$http || service;
    }
  };

})();

/**
 * Something like this would be called whenever you
 * inject the $http service as a dependency... 
 * However, since it could be passed into multiple things all in the same runtime,
 * like controllers, directives, etc., we only need to initialize it ONE time
 */
$httpProvider.init();

/**
 * Now let's pretend we're inside, say, a controller.
 *
 * This method can safely be called many times,
 * but the method is always being called from the same singleton object
 */
$http.request();  

Also, you'll notice that there's a local variable somePrivateConfig within the $httpProvider IIFE. If we were to re-initialize a new $http every time its injected to a component (whether that's a controller, directive, or whatever), a new private variable would be created, but we always want to be referencing that same value throughout the lifecycle of the $http object, so that we can guarantee that all those components are always referencing the same information.

But this has nothing to do with the XHR object itself. I may have misused some of the terminology above and misrepresented where and how providers themselves within the context of AngularJS are initialized into singleton objects, but the principle of the singleton pattern still stands in that it simply means the async request wrapper "class" (which is the $http service) is a singleton, but the XHR isn't.