angularjs-http-batcher

<!-- Include the AngularJS library first --> <script src="node_modules/angular/angular.min.js"></script> <!-- Then include the http-batcher library --> <script src="node_modules/angularjs-http-batcher/dist/angular-http-batch.min.js"></script> <script> angular.module('myApp', ['jcs.angular-http-batch']) .config([ 'httpBatchConfigProvider', function (httpBatchConfigProvider) { httpBatchConfigProvider.setAllowedBatchEndpoint( // Root endpoint URL of your API 'http://api.myapp.com', // The specific endpoint that accepts batch requests 'http://api.myapp.com/batch', // Optional configuration parameters { maxBatchedRequestPerCall: 20, minimumBatchSize: 2, batchRequestCollectionDelay: 100, ignoredVerbs: ['HEAD', 'OPTIONS'], // Do not batch these verbs sendCookies: true, enabled: true, adapter: 'httpBatchAdapter' // Defaults to HTTP 1.1 adapter } ); } ]); angular.module('myApp') .controller('MyController', ['$http', function($http) { console.log('Fetching user data...'); $http.get('http://api.myapp.com/users/1').then(res => console.log('User 1:', res.data)); $http.get('http://api.myapp.com/users/2').then(res => console.log('User 2:', res.data)); $http.get('http://api.myapp.com/products/10').then(res => console.log('Product 10:', res.data)); // These three GET requests to 'http://api.myapp.com' will be batched if within the delay window }]); // Manually bootstrap the Angular app angular.element(document).ready(function() { angular.bootstrap(document, ['myApp']); }); </script> <div ng-app="myApp" ng-controller="MyController"> <h1>HTTP Batching Demo</h1> <p>Check your browser's network tab for batched HTTP requests.</p> </div>