แทรกการทำงานของ HttpClient ขณะที่ Request และ Response ตอนที่ 4

  onSubmit(f:any){
    let data = f.value;
    this.http.post(this.urlApi+'show_data.php',data)    
    .subscribe(result =>{
      this.responseValue = result;
      console.log(result);
    },
    ( err:HttpErrorResponse ) => {
      // กรณี error
      if (err.error instanceof Error) {
        // กรณี error ฝั่งผู้ใช้งาน หรือ การเชื่อมต่อเกิด error ขึ้น
        console.log('An error occurred:', err.error.message);
      }else{ // กรณี error ฝั่ง server ไม่พบไฟล์ ,server error 
        console.log(`Backend returned code ${err.status}, body was: ${err.error}`);
      }       
    });
  }

post(url: string, body: any | null, options: {
    headers?: HttpHeaders | {
        [header: string]: string | string[];
    };
    observe?: HttpObserve;
    params?: HttpParams | {
        [param: string]: string | string[];
    };
    reportProgress?: boolean;
    responseType?: 'arraybuffer' | 'blob' | 'json' | 'text';
    withCredentials?: boolean;
} = {}): Observable<any>

this.http.post(this.urlApi+'show_data.php',data,{
  headers: new HttpHeaders().set('X-Custom-Header', 'my-header'),
  params: new HttpParams().set('id', '3')
})   

import { HttpClient, HttpHeaders, 
        HttpErrorResponse, 
        HttpResponse,
        HttpParams } from '@angular/common/http';

http://localhost/demo/show_data.php?id=3  

<?php
header('Access-Control-Allow-Origin: *'); 
header('Access-Control-Allow-Headers: Content-Type,X-Custom-Header'); 
header('Content-type: application/json');
//require_once("dbconnect.php");
$jsonData = array();	
if($_SERVER['REQUEST_METHOD'] == "GET") {
	echo json_encode($jsonData);
}elseif($_SERVER['REQUEST_METHOD'] == "OPTIONS"){
	echo json_encode($jsonData);
}elseif($_SERVER['REQUEST_METHOD'] == "POST"){
	$json = file_get_contents('php://input');
	$postData = json_decode($json, TRUE);
/*	$mysqli->query(
	"
	INSERT INTO tbl_data SET 
	data_text='".$postData['fullname']."'
	"
	);	*/
	// $_GET['id'] เรียกค่าตัวแปร GET ได้
	echo json_encode(array(
		"statusCode"=>"200 OK",
		"statusMessage"=>"Successful",
		"getData"=>$_GET,
		"postData"=>$json
	));
}else{
    header("HTTP/1.1 403 Access Forbidden");
	echo json_encode(array(
		"statusCode"=>"403 Access Forbidden",
		"statusMessage"=>"Fail"
	));
}
?>

C:\projects\httpclient>ng g class register/my-http-interceptor

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

@Injectable()
export class MyHttpInterceptor implements HttpInterceptor {
    
    constructor(){}
    
    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
      console.log('Interceptor ran..');
      return next.handle(req);
    }

}

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule }   from '@angular/forms';
import { HTTP_INTERCEPTORS } from '@angular/common/http';

import { RegisterRoutingModule } from './register-routing.module';
import { RegisterComponent } from './register.component';

import { MyHttpInterceptor } from './my-http-interceptor';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    RegisterRoutingModule
  ],
  providers: [{
    provide: HTTP_INTERCEPTORS,
    useClass: MyHttpInterceptor,
    multi: true,
  }],  
  declarations: [RegisterComponent]
})
export class RegisterModule { }

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

@Injectable()
export class MyHttpInterceptor implements HttpInterceptor {
    
    constructor(){}
    
    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
      console.log('Interceptor ran..');
      const secureReq = req.clone({url: req.url.replace('http://', 'https://')});
      console.log(secureReq.url);
      return next.handle(secureReq);
    }

}

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
	console.log('Interceptor ran..');
	const authReq = req.clone({headers: req.headers.set('X-Custom-Header', 'x-header-value')});
	return next.handle(authReq);  
}

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
	console.log('Interceptor ran..');
	const authReq = req.clone({setHeaders: {'X-Custom-Header': 'x-header-value'}});
	return next.handle(authReq);  
}

import {Injectable} from '@angular/core';
import {HttpEvent, HttpInterceptor, 
        HttpHandler,
        HttpResponse,
        HttpRequest} from '@angular/common/http';
import { Observable } from 'rxjs/Observable';     
import 'rxjs/add/operator/do';   

@Injectable()
export class MyHttpInterceptor implements HttpInterceptor {
    
    constructor(){}
    
    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        console.log('Interceptor ran..');
        const started = Date.now();  // เวลาเริ่มต้นที่ request          
        return next
        .handle(req)
        .do(event => {
            if (event instanceof HttpResponse) {
                // หาช่วงเวลาที่ใช้ในการรับส่งข้อมูล เวลาที่ response ส่งค่ากลับมา ลบด้วยเวลา เริ่มต้น
                const elapsed = Date.now() - started; 
                // แสดง url ที่ทำการ request ไป ว่าใช้เวลาไปกี่ มิลลิวินาที
                console.log(`Request for ${req.urlWithParams} took ${elapsed} ms.`);
            }
        });                  

    }

}