{"id":15928785,"url":"https://github.com/jonsamwell/ngx-http-batcher","last_synced_at":"2025-10-06T16:30:38.911Z","repository":{"id":77121768,"uuid":"90504788","full_name":"jonsamwell/ngx-http-batcher","owner":"jonsamwell","description":"Angular (2+) HTTP batching module to reduce the number of HTTP requests and increase performance","archived":false,"fork":false,"pushed_at":"2018-06-01T13:27:53.000Z","size":31,"stargazers_count":4,"open_issues_count":3,"forks_count":1,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-01-01T13:37:30.753Z","etag":null,"topics":["angular","angular-http","angular2","http","http-batching","ngx","performance"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jonsamwell.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-05-07T02:53:07.000Z","updated_at":"2019-08-25T19:48:48.000Z","dependencies_parsed_at":"2023-03-24T12:20:32.808Z","dependency_job_id":null,"html_url":"https://github.com/jonsamwell/ngx-http-batcher","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/jonsamwell/ngx-http-batcher","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jonsamwell%2Fngx-http-batcher","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jonsamwell%2Fngx-http-batcher/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jonsamwell%2Fngx-http-batcher/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jonsamwell%2Fngx-http-batcher/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jonsamwell","download_url":"https://codeload.github.com/jonsamwell/ngx-http-batcher/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jonsamwell%2Fngx-http-batcher/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278643281,"owners_count":26021074,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-06T02:00:05.630Z","response_time":65,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular-http","angular2","http","http-batching","ngx","performance"],"created_at":"2024-10-07T00:00:26.764Z","updated_at":"2025-10-06T16:30:38.585Z","avatar_url":"https://github.com/jonsamwell.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ngx-http-batcher\n\nAngular (2+) HTTP batching module to reduce the number of HTTP requests and increase performance\n\n[![Build Status](https://travis-ci.org/jonsamwell/ngx-http-batcher.svg?branch=master)](https://travis-ci.org/jonsamwell/ngx-http-batcher)\n\n\nOne of the biggest, yet relatively unknown performance boosts you will get with modern web applications is to reduce the number of HTTP request an application makes.  All you need to do is configure the batch endpoint with the library and the rest is taken care of!\n\nWorking demo https://plnkr.co/edit/OgvZ09iYO64VoXHLRGQa?p=preview\n\n## Table of contents:\n- [Get Started](#get-started)\n  - [Installation](#installation)\n  - [Examples](#examples)\n  - [Usage](#usage)\n- [Configuration Object Options](#configuration)\n  - [Endpoint Url](#config-endpointurl)\n  - [Batch Endpoint Url](#config-batchurl)\n  - [Enabled](#config-enabled)\n  - [Min Requests Per Batch](#config-minRequestsPerBatch)\n  - [Max Requests Per Batch](#config-maxRequestsPerBatch)\n  - [Batch Request Collection Delay Milliseconds](#config-batchRequestCollectionDelayMilliseconds)\n  - [Ignored Http Verbs](#config-ignoredHttpVerbs)\n  - [Send Cookies](#config-sendCookies)\n  - [Unique Request Name (content-dispositon header)](#config-uniqueRequestName)\n  - [Http Batching Adapter](#config-httpBatchingAdapter)\n  - [Can Batch Request](#config-canBatchRequest)\n  - [On Before Send Batch Request Handler](#config-onBeforeSendBatchRequest)\n- [.Net WebApi Configuation](#config-net)\n- [Configuring for Java Servlet \u003c= 3.1](#config-javaservlet)\n\n\n## \u003ca name=\"get-started\"\u003e\u003c/a\u003e Get Started\n\n### \u003ca name=\"installation\"\u003e\u003c/a\u003e Installation\n\nYou can install this package locally with npm.\n\n```bash\nnpm install ngx-http-batcher --save\n```\n\n### \u003ca name=\"examples\"\u003e\u003c/a\u003e Examples\nYou can see a working Plunker here https://plnkr.co/edit/OgvZ09iYO64VoXHLRGQa?p=preview\nThere isn't much too visually see but you will want to open up the network tab on the dev tools and look for a request will '$batch'.  This the the actual batch request for 3 seperate normal http requests.\n\n### \u003ca name=\"usage\"\u003e\u003c/a\u003e Usage\n`NgxHttpBatcherModule` should be registered in the `AppModule` imports.  This module relies on the Angular HttpModule so ensure that is also imported.\n\nThe below bit of code is everything you need to get going.  However, I'll explain it below.\n\n```javascript\nimport { BrowserModule } from \"@angular/platform-browser\";\nimport { NgModule } from \"@angular/core\";\nimport { HttpModule, Http } from \"@angular/http\";\nimport { NgxHttpBatcherModule,\n         HttpBatchConfiguration,\n         HttpBatchConfigurationCollection,\n         HttpBatcher } from \"ngx-http-batcher\";\n\nimport { AppComponent } from \"./app.component\";\n\n// Exported function so that HttpBatchConfigurationCollection can be used as in DI.\n// Having this as an exported function enabled AOT complication as well :-)\nexport function httpBatchConfigurationFactory() {\n  return new HttpBatchConfigurationCollection([\n    // this is a basic configuration object see [Configuration Object Options]\n    // for more information on all the options\n    new HttpBatchConfiguration({\n      rootEndpointUrl: \"https://api.myservice.com\",\n      batchEndpointUrl: \"https://api.myservice.com/$batch\"\n    })]);\n};\n\n// Note the providers block where the Http class is being replaced by the HttpBatcher class.\n// This ensures that if you inject the Http service into something you actually get the\n// HttpBatcher class and batching becomes transparent to you.\n@NgModule({\n  declarations: [\n    AppComponent\n  ],\n  imports: [\n    BrowserModule,\n    HttpModule,\n    NgxHttpBatcherModule\n  ],\n  providers: [\n    { provide: HttpBatchConfigurationCollection, useFactory: httpBatchConfigurationFactory },\n    { provide: Http, useClass: HttpBatcher }\n  ],\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }\n```\n\nThen you can just use the Http service as you normally would safe in the knowlegde that requests to you batchable service (configured above) will be batched.\n\n```javascript\nimport { Component } from \"@angular/core\";\nimport { Http } from \"@angular/http\";\n\n@Component({\n  selector: \"app-root\",\n  templateUrl: \"./app.component.html\",\n  styleUrls: [\"./app.component.css\"]\n})\nexport class AppComponent {\n  public somedata: string[];\n  public otherdata: string[];\n\n  public constructor(private http: Http) {\n    http.get(\"https://api.myservice.com/somedata\")\n        .subscribe(response =\u003e this.somedata = response.json());\n    http.get(\"https://api.myservice.com/otherdata/123-456\")\n        .subscribe(response =\u003e this.otherdata = response.json());\n    http.put(\"https://api.myservice.com/jobs\", { id: 1, name: \"Angular Wizard\" })\n        .subscribe();\n  }\n}\n```\n\n\n### \u003ca name=\"configuration\"\u003e\u003c/a\u003e Configuration\n\nBelow are all the configuration options for a single batch endpoint.  Note that you can have as many batch endpoints as you want but you would need a seperate configuraiton object for each one.\n\n### \u003ca name=\"config-endpointurl\"\u003e\u003c/a\u003e Endpoint Url\nThe root endpoint url which is used to determine if the http call is destinted to an endpoint that can be batched.\nFor example you endpoint might be:\n\n```https://api.myservice.com```\n\nCalls to ```https//api.myservice.com/users``` or ```https//api.myservice.com/users/fdfkhdf-3432e23wd/friends?limit=10\u0026from=0``` would be batched.\nCalls to ```https://qa.myservice.com/bugs``` would not be batched as the subdomain are different.\n\n### \u003ca name=\"config-batchurl\"\u003e\u003c/a\u003e Batch Endpoint Url\nThe url of the exposed batch endpoint that is associated with the service defined in rootEndpointUrl.\n\nFor example\n\n```https://api.myservice.com/$batch```\n\n### \u003ca name=\"config-enabled\"\u003e\u003c/a\u003e Enabled\nThis optional parameter defaults to true.  If false calls that would normally be batched to this endpoint will just be passed through as normal HTTP calls.\n\n### \u003ca name=\"config-minRequestsPerBatch\"\u003e\u003c/a\u003e Min Requests Per Batch\nThe minimum number of http requests that trigger a batch request to be sent.\n\nHttp calls are batched into groups.  There is no point batching a single http call therefore the default smallest batch size is 2.\n\n### \u003ca name=\"config-maxRequestsPerBatch\"\u003e\u003c/a\u003e Max Requests Per Batch\nThe maximum number of http requests that can be batched in a single batch request.\n\nHttp calls are batched into groups.  Batching hundreds of http calls into a single batch request might be unwise due to string processing times and the fact that you would not be taking advantage of being able to send to more than one http request to the same host of once.  Therefore, the default max batch size is 20.\n\n### \u003ca name=\"config-batchRequestCollectionDelayMilliseconds\"\u003e\u003c/a\u003e Batch Request Collection Delay Milliseconds\nThe period of time to wait in milliseconds between recieving the first http request and sending the batch.\n\nThis is undoubtedly the most important option. As this module tries to be as transparent as possible to the user.\n\nThe default time in milliseconds the http batcher should wait to collection all request to this domain after the first http call that can be batched has been collect. This defaults to 75ms. Therefore if you send a HTTP GET call that can be batched the HTTP batcher will receive this call and wait a further 75ms before sending the call in order to wait for other calls to the same domain in order to add them to the current batch request. If no other calls are collected the initial HTTP call will be allowed to continue as normal and will not be batched unless the config property - minRequestBatchSize is set to 2.\n\n### \u003ca name=\"config-ignoredHttpVerbs\"\u003e\u003c/a\u003e Ignored Http Verbs\nRequests with these http verbs will be ignored and not form part of the batch.\n\nBy default http requests with the verbs 'HEAD' \u0026 'OPTIONS' are ignored.\n\n### \u003ca name=\"config-sendCookies\"\u003e\u003c/a\u003e Send Cookies\nTrue to send cookies, defaults to false to reduce request size.\n\nIf this is set to true cookies available on the document.cookie property will be set in each segment of a batch request. Note that only non HTTPOnly cookies will be sent as HTTPOnly cookies cannot be access by JavaScript because of security limitations.\n\n### \u003ca name=\"config-uniqueRequestName\"\u003e\u003c/a\u003e Unique Request Name\nAn optional parameter to set a unique parameter name on the Content-Disposition header. This requires the a 'Content-Disposition' header is first set on the initial request sending in a Content-Disposition header. Sample configuration:\n\nSome backend servers may require that each part be named in this manner. If the configuration above is used, then each part will have a header like this: Content-Disposition: form-data; name=batchRequest0\n\nIf a Content-Disposition header is not added in the request then this parameter is silently ignored.\n\n## \u003ca name=\"config-net\"\u003e\u003c/a\u003e Configuring .Net WebApi to accept batch requests\n\nThis is really simple the web api team have done a really good job here. To enable batch request handling you just add a new route to your application and the rest is done for you! It's so easy I don't see any reason for you not to do it! See this link for a more detailed setup guide. Just add the below code to your web api configuration class and you are good to go!\n\n```\nconfiguration.Routes.MapHttpBatchRoute(\n        routeName:\"batch\",\n        routeTemplate:\"$batch\",\n        batchHandler:new DefaultHttpBatchHandler(server));\n```\n\n## \u003ca name=\"config-javaservlet\"\u003e\u003c/a\u003e Configuring for Java Servlet \u003c= 3.1\n\nJava Servlet \u003c= 3.1 parses multipart requests looking for the Content-Disposition header, expecting all multipart requests to include form data. It also expects a content disposition header per request part in the batch.\n\nTherefore you will need to setup the library to do this. Add a 'Content-Disposition' header of 'form-data' and set the 'Unique Request Name' configuration option.\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjonsamwell%2Fngx-http-batcher","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjonsamwell%2Fngx-http-batcher","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjonsamwell%2Fngx-http-batcher/lists"}