Merge pull request #74 from mpalourdio/filter_methods

Filter requests by HTTP method - Fixes #74

Author: mpalourdio

CHANGELOG.md

@@ -1,9 +1,13 @@
 # Changelog
 
+## v2.2.0
+
+This release adds the possibility to filter http requests that should not be handled by the interceptor by providing an array of HTTP methods to the component's ``filteredMethods`` property.
+
 ## v2.1.0
 
 This release introduces the **minimum duration** option. It gives the possibility to force a minimum duration during which the spinner should be visible.
-You can mix this parameter with the **debounce delay** option :
+You can mix this parameter with the **debounce delay** option:
 
 ```xml
 <spinner 
@@ -97,7 +101,7 @@ The responsible ``Subject`` has been replaced by a ``ReplaySubject``.
 The module is now splitted in sub-modules for more convenience. See [usage](https://github.com/mpalourdio/ng-http-loader#usage).  
 It's an **opt-in** feature. The "old" module import method, by simply declaring ``NgHttpLoaderModule``, is still fully supported. 
 
-**BC break** : paths of components and services have changed.
+**BC break**: paths of components and services have changed.
 - Components are now located in the ``components`` folders.
 - Services are now located in the ``services`` folders.
 

README.md

@@ -72,7 +72,7 @@ import { NgHttpLoaderModule } from 'ng-http-loader'; <============
 export class AppModule { }
 ```
 
-In your app.component.html, simply add :
+In your app.component.html, simply add:
 ```xml
 <spinner></spinner>
 ```
@@ -120,20 +120,25 @@ You can define your own loader component in place of the built-in ones. The need
 - Create your component
 - Add it to the [entryComponent](https://angular.io/guide/ngmodule-faq#what-is-an-entry-component) definition in your module definition
 - Reference your component in a public property in your ``app.component.ts``
-- Reference the property in the spinner component like this :
+- Reference the property in the spinner component like this:
 ```xml
 <spinner [entryComponent]="myAwesomeComponent"></spinner>
 ```
 
 You can find some short examples [here](https://gist.github.com/mpalourdio/2c0bec03d610b24ff49db649fbb69a48) and [here](https://gist.github.com/mpalourdio/e05b4495de2abeeecfcf92d70e4ef93e).
 
-## Requests filtering
+## Requests filtering by URL or by HTTP method
 
-You can also filter the http requests that shouldn't be caught by the interceptor by providing **an array of regex patterns**:
+You can filter the http requests that shouldn't be caught by the interceptor by providing **an array of regex patterns**:
 ```xml
 <spinner [filteredUrlPatterns]="['\\d', '[a-zA-Z]', 'my-api']"></spinner>
 ```
 
+You can also filter the http requests by providing **an array of HTTP methods** (case insensitive):
+```xml
+<spinner [filteredMethods]="['gEt', 'POST', 'PuT']"></spinner>
+```
+
 ## Manually show and hide the spinner
 
 You can manually show and hide the spinner component if needed. You must use the ``SpinnerVisibilityService`` for this purpose.  

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ng-http-loader",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "scripts": {
     "ng": "ng",
     "build": "ng build",

src/lib/components/spinner/spinner.component.ts

@@ -32,6 +32,8 @@ export class SpinnerComponent implements OnDestroy, OnInit {
     @Input()
     public filteredUrlPatterns: string[] = [];
     @Input()
+    public filteredMethods: string[] = [];
+    @Input()
     public debounceDelay = 0;
     @Input()
     public minDuration = 0;
@@ -61,6 +63,11 @@ export class SpinnerComponent implements OnDestroy, OnInit {
                 this.pendingInterceptorService.filteredUrlPatterns.push(new RegExp(e));
             });
         }
+
+        if (!(this.filteredMethods instanceof Array)) {
+            throw new TypeError('`filteredMethods` must be an array.');
+        }
+        this.pendingInterceptorService.filteredMethods = this.filteredMethods;
     }
 
     ngOnDestroy(): void {

src/lib/services/pending-interceptor.service.ts

@@ -19,6 +19,7 @@ export class PendingInterceptorService implements HttpInterceptor {
     private _pendingRequests = 0;
     private _pendingRequestsStatus: ReplaySubject<boolean> = new ReplaySubject<boolean>(1);
     private _filteredUrlPatterns: RegExp[] = [];
+    private _filteredMethods: string[] = [];
     private _forceByPass: boolean;
 
     /** @deprecated Deprecated in favor of pendingRequestsStatus$ */
@@ -38,6 +39,10 @@ export class PendingInterceptorService implements HttpInterceptor {
         return this._filteredUrlPatterns;
     }
 
+    set filteredMethods(httpMethods: string[]) {
+        this._filteredMethods = httpMethods;
+    }
+
     set forceByPass(value: boolean) {
         this._forceByPass = value;
     }
@@ -48,8 +53,16 @@ export class PendingInterceptorService implements HttpInterceptor {
         });
     }
 
+    private shouldBypassMethod(req: HttpRequest<any>): boolean {
+        return this._filteredMethods.some(e => {
+            return e.toUpperCase() === req.method.toUpperCase();
+        });
+    }
+
     intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
-        const shouldBypass = this.shouldBypassUrl(req.urlWithParams) || this._forceByPass;
+        const shouldBypass = this.shouldBypassUrl(req.urlWithParams)
+            || this.shouldBypassMethod(req)
+            || this._forceByPass;
 
         if (!shouldBypass) {
             this._pendingRequests++;