HTTP

Contents

• HttpClientModule
• Tracking Progress Events
• Interceptors
  • Using Interceptors

HttpClientModule

• Import into AppModule

AppModule

import { HttpClientModule } from '@angular/common/http';

imports : [
    HttpClientModule
]

• Use services to make http calls to keep the code organized and easy to manage API endpoints

HttpClient

• Inject HttpClient into the service

UserService

constructor(
    private httpClient : HttpClient
){}

url : string = environment.exampleservice + '/users';

getAllUsers() : Observable<any>{
    return this.httpClient.get(this.url);
}

• Read Environments

• Inject Service into components

UserComponent

users : any = []

getAllUsers(){
    this.userService.getAllUsers().subscribe(
        received_users => {
            this.users = received_users;
        }
    );
}

ngOnInit(){
    this.getAllUsers();
}

constructor(
    private userService : UserService
){}

• Read RxJs for Observables

note

NOTE:

• Always subscribe to observables (even if no data is received from endpoint)
• Otherwise, the request is NOT ACTUALLY made

HttpOptions

UserService

// httpOptions is a user-defined name. Can be named as anything ex: httpOpt, opt ..

const httpOptions = {};

• Response Formats

const responseType = 'text';

• Headers

const headers = new HttpHeaders({
    'contentType': 'application/json'
});

//  to set existing property use set method
headers.set('Authorization' : 'new-auth-token');

// to add new property use append method
headers.append('Authorization' : 'new-auth-token');

• URL Parameters

const params = new HttpParans().set('id', '3');

• Add all the options to httpOptions object

const httpOptions = {
    'responseType' : responseType,
    'headers' : headers,
    'params' : params
} 

• Add httpOptions to the http call

return this.httpClient.get(url, httpOptions)

Tracking Progress Events

Interceptors

• Used to modify request before it hits the server

• HTTP API → Interceptors → Actual Request

• Example: Add auth-token to all http requests

  • Option 1: Add auth-token to headers in all http requests
  • Option 2: Append auth-token in every request automatically with Interceptor

• Interceptors are injectables

• implements HttpInterceptor

• There are multiple interceptors organized in a chain structure

• First one is called by the Angular framework

• We need to call next interceptor manually using next.handle(req); after we are done with the request

• Defining Interceptor

@Injectable()
export class AuthInterceptor implements HttpInterceptor{
    intercept(
        req : HttpRequest<any>,
        next : HttpHandler
    ) : Observable<HttpEvent<any>>{
        req.headers.append('Authorization', 'x-auth-token-x');
        return next.handle(req);
    }
}

• Providing Interceptors

AppModule

import { HTTP_INTERCEPTORS } from '@angular/common/http';

providers : [
    {
        providers : HTTP_INTERCEPTORS,
        useClass : AuthInterceptor,
        multi : true
    }
]

Caching http Requests

• Source : malcoded

Using service

CachedHttpService

interface Whatever {
    id : string;
}

@Injectable()
export class CachedHttpService {
    private cache = {}

    constructor(private http: HttpClient) {}

    public getWhatever(id: string): Observable<Whatever> {
        if (this.cache[id] == null) {
            // If we have no response in cache, reach out to the web
            const observable = this.getWhateverHttpRequest(id);

            // We need to subscribe to the result, to write the result to our cache
            let subscription = observable.first().subscribe(
                response => {
                // Wite the response to cache
                this.cache[id] = response;
            })

            console.log('Cached Http: Read from server')
            return observable;
        } else {
            //If we have the response in our cache already, just serve that response
            console.log('Cached Http: Read from cache')
            return Observable.of(this.cache[id])
        }
    }

    private getWhateverHttpRequest(id: string): Observable<Whatever> {
        // Only for test purposes
        // return Observable.of({ id: 'result' })
        return this.http.get<Whatever>(url + id);
    }
}

• Add this service to AppModule providers OR add { providedIn : 'root' } in the service itself

Using Interceptors