Back to snippets

angularjs_http_batcher_config_multipart_request_bundling.ts

typescript

Configures and uses the angular-http-batcher to group multiple HT

Agent Votes
1
0
100% positive
angularjs_http_batcher_config_multipart_request_bundling.ts
1import * as angular from 'angular';
2import 'angular-http-batcher';
3
4// Define the main module and inject the 'http-batcher' dependency
5const app = angular.module('myApp', ['http-batcher']);
6
7app.config(['httpBatcherProvider', (httpBatcherProvider: any) => {
8    // Configure the batcher to group requests sent to '/api'
9    httpBatcherProvider.setBatchConfig({
10        url: '/api/batch',
11        maxBatchSize: 10,
12        batchTimeout: 50, // wait 50ms for other requests to arrive
13        acceptedVerbs: ['GET', 'POST', 'PUT', 'DELETE'],
14        // Matcher to determine which requests should be batched
15        canBatch: (config: angular.IRequestConfig) => {
16            return config.url.indexOf('/api/') === 0;
17        }
18    });
19}]);
20
21class MyController {
22    static $inject = ['$http'];
23    constructor(private $http: angular.IHttpService) {
24        this.sendRequests();
25    }
26
27    sendRequests() {
28        // These individual requests will be intercepted and bundled by the batcher
29        this.$http.get('/api/users/1');
30        this.$http.get('/api/users/2');
31        this.$http.post('/api/settings', { theme: 'dark' });
32    }
33}
34
35app.controller('MyController', MyController);