common code to handle http method like get, put, post, delete

Question

With angularjs or angular-1, I used to have common code (not exactly) to handle http methods like GET, PUT, POST, DELETE,

// can be called with GET, PUT, POST, DELETE

sharedService.process(method, url, data, headers).then(function(result){

     //handle response here
     .....

})

sharedservice.js

// this would handle all types of requests. eg. GET, PUT, POST, DELETE

process: function (method, url, data, header){
  ...
  ...
  return $http({
          method  : method,
          url     : url,
          headers : headers,
          data    : data
   })
  ...
  ...
}

How to achieve the same in angular 2/4/5?
Is there any way to achieve it with promise or observable response?
Is there any common way to handle HTTP methods ?

https://angular.io/api/common/http/HttpClient see in particular the `request` method. — Henry, Feb 20 '18 at 17:26
@Henry could please provide a small example? That would be appreciated. — micronyks, Feb 20 '18 at 17:40

Nour · Answer 1 · 2018-02-22T11:36:19.120

You can use httpClient interceptor:

The documentation link is : Angular io

Example for setting authentication header for every request:

 import { Injectable } from '@angular/core';
 import {
   HttpRequest,
   HttpHandler,
   HttpEvent,
   HttpInterceptor
 } from '@angular/common/http';
 import { AuthService } from './auth/auth.service';
 import { Observable } from 'rxjs/Observable';

 @Injectable()
 export class TokenInterceptor implements HttpInterceptor {

 constructor(public auth: AuthService) {}

 intercept(request: HttpRequest<any>, next: HttpHandler):Observable<HttpEvent<any>> {

    request = request.clone({
       setHeaders: {
         Authorization: `Bearer ${this.auth.getToken()}`
       }
    });

    return next.handle(request);
 }
}

EDIT:

After i got your point correctly here are what you should do:

Write a services for login:

 import {Injectable} from '@angular/core';
 import { HttpClient} from '@angular/common/http';
 import {Observable} from 'rxjs/Observable';


 @Injectable()
 export class AuthenticationService{

      constructor(private http:HttpClient){}

      public isUserNameExist(username:string):Observable<boolean>{
            private url:string = "Your server side url";
            return this.http.get(url);
      }

      public login(username:string, password:string)Observable<User>{
             private url:string = "";
             return this.http.post<User>(url);
      }

 }

And in your component you can write the following:

 export class loginComponent{

    constructor(private authService:AuthenticationService){}


    onFromSubmit(username:string, password:string){
        this.authService.login(username, password)
            .subscribe(user => //Do what ever you want);
    } 
 }

Thanks for your answer but I am not looking for it. I am aware how interceptor works. What I want is, my developers shouldn't write http.get, http.post kinda syntex. They only need to write sharedservice.process(...) And bracket should contain all information as mentioned inmy question. — micronyks, Feb 21 '18 at 02:19
You need to create a service i will provide you with an example once i get home — Nour, Feb 21 '18 at 19:34

common code to handle http method like get, put, post, delete

1 Answers1