HTTP Client

What is HTTP Client?

HTTP Client is a client-side programming that provides the HTTP server access to various resources and services. It allows the client (a browser or application) to send HTTP requests and receive responses from the server.

HTTP client programming is an important feature in every modern web application. Nowadays, many applications expose their functionality through REST APIs, which work over the HTTP protocol.

To support this, the Angular team offers extensive tools to enable HTTP communication with servers. Angular provides a module called HttpClientModule and a service called HttpClient to handle HTTP programming.

The following diagram provides a clear understanding of the HTTP Client, and the request and response mechanism −

Let us learn how to use the HttpClient service in this chapter. Developers should have a basic understanding of HTTP programming to understand the concepts discussed in this chapter.

Expense REST API

The prerequisite for HTTP programming is a basic understanding of the HTTP protocol and REST API techniques. HTTP programming involves two parts: the server and the client. Angular provides support for creating client-side applications, while Express (a popular web framework) provides support for creating server-side applications.

Let us create anExpense Rest APIusing the express framework and then access it from ourExpenseManagerapplication using the Angular HttpClient service.

Open a command prompt and create a new folder, express-rest-api.

cd /go/to/workspace 
mkdir express-rest-api 
cd expense-rest-api

Initialize a new node application using the below command −

npm init

After running the npm init commond will ask some basic questions like project name (express-rest-API), entry point (server.js), etc., as mentioned below −

This utility will walk you through creating a package.json file. 
It only covers the most common items, and tries to guess sensible defaults. 
See 'npm help json' for definitive documentation on these fields and 
exactly what they do. 
Use 'npm install <pkg>' afterwards to install a package and save 
it as a dependency in the package.json file. 
Press ^C at any time to quit. 
package name: (expense-rest-api) 
version: (1.0.0) 
description: Rest api for Expense Application 
entry point: (index.js) server.js 
test command:
git repository: 
keywords: 
author: 
license: (ISC) 
About to write to \path\to\workspace\expense-rest-api\package.json: { 
   "name": "expense-rest-api", 
   "version": "1.0.0", 
   "description": "Rest api for Expense Application", 
   "main": "server.js", 
   "scripts": { 
  "test": "echo \"Error: no test specified\" &amp;&amp; exit 1" 
   }, 
   "author": "", 
   "license": "ISC" 
} 
Is this OK? (yes) yes

Installexpress, SQLite, andcorsmodules using the below command −

npm install express sqlite3 cors

Create a new filewith the name sqlitedb.jsand place the below code −

var sqlite3 =require('sqlite3').verbose()constDBSOURCE="expensedb.sqlite"let db =newsqlite3.Database(DBSOURCE,(err)=>{if(err){
  console.error(err.message)throw err
   }else{
  console.log('Connected to the SQLite database.')
  db.run(`CREATE TABLE expense (
     id INTEGER PRIMARY KEY AUTOINCREMENT,
     item text, 
     amount real, 
     category text, 
     location text, 
     spendOn text, 
     createdOn text 
     )`,(err)=>{if(err){
              console.log(err);}else{var insert ='INSERT INTO expense (item, amount, category, location, spendOn, createdOn) VALUES (?,?,?,?,?,?)'
              db.run(insert,['Pizza',10,'Food','KFC','2020-05-26 10:10','2020-05-26 10:10'])
              db.run(insert,['Pizza',9,'Food','Mcdonald','2020-05-28 11:10','2020-05-28 11:10'])
              db.run(insert,['Pizza',12,'Food','Mcdonald','2020-05-29 09:22','2020-05-29 09:22'])
              db.run(insert,['Pizza',15,'Food','KFC','2020-06-06 16:18','2020-06-06 16:18'])
              db.run(insert,['Pizza',14,'Food','Mcdonald','2020-06-01 18:14','2020-05-01 18:14'])}});}});
module.exports = db

Here, we are creating a new SQLite database and loading some sample data.

Now, open server.js and place the below code (if you are not able to see the file in your application create it manually within the root directory) −

var express =require("express")var cors =require('cors')var db =require("./sqlitedb.js")var app =express()
app.use(cors());var bodyParser =require("body-parser");
app.use(bodyParser.urlencoded({ extended:false}));
app.use(bodyParser.json());varHTTP_PORT=8000 
app.listen(HTTP_PORT,()=>{
   console.log("Server running on port %PORT%".replace("%PORT%",HTTP_PORT))});

app.get("/",(req, res, next)=>{
res.json({"message":"Ok"})});
app.get("/api/expense",(req, res, next)=>{var sql ="select * from expense"var params =[]
   db.all(sql, params,(err, rows)=>{if(err){
    res.status(400).json({"error":err.message});return;}
  res.json(rows)});});
app.get("/api/expense/:id",(req, res, next)=>{var sql ="select * from expense where id = ?"var params =[req.params.id]
   db.get(sql, params,(err, row)=>{if(err){
     res.status(400).json({"error":err.message});return;}
  res.json(row)});});
app.post("/api/expense/",(req, res, next)=>{var errors=[]if(!req.body.item){
  errors.push("No item specified");}var data ={
  item : req.body.item,
  amount: req.body.amount,
  category: req.body.category,
  location : req.body.location,
  spendOn: req.body.spendOn,
  createdOn: req.body.createdOn,}var sql ='INSERT INTO expense (item, amount, category, location, spendOn, createdOn) VALUES (?,?,?,?,?,?)'var params =[data.item, data.amount, data.category, data.location, data.spendOn, data.createdOn]
   db.run(sql, params,function(err, result){if(err){
     res.status(400).json({"error": err.message})return;}
  data.id =this.lastID;
  res.json(data);});})
app.put("/api/expense/:id",(req, res, next)=>{var data ={
  item : req.body.item,
  amount: req.body.amount,
  category: req.body.category,
  location : req.body.location,
  spendOn: req.body.spendOn
   }
   db.run(`UPDATE expense SET
     item = ?, 
     amount = ?,
     category = ?, 
     location = ?, 
     spendOn = ? 
     WHERE id = ?`,[data.item, data.amount, data.category, data.location,data.spendOn, req.params.id],function(err, result){if(err){
        console.log(err);
        res.status(400).json({"error": res.message})return;}
     res.json(data)});})
app.delete("/api/expense/:id",(req, res, next)=>{
   db.run('DELETE FROM expense WHERE id = ?',
  req.params.id,function(err, result){if(err){
        res.status(400).json({"error": res.message})return;}
     res.json({"message":"deleted", changes:this.changes})});})
app.use(function(req, res){
   res.status(404);});

Here, we create a basic CURD rest API to select, insert, update, and delete expense entries.

Run the application using the below command −

npm run start

Open a browser, enter http://localhost:8000/ and press enter. You will see below response −

{ 
   "message": "Ok" 
}

The above message confirms that our application is working fine.

Change the URL tohttp://localhost:8000/api/expense, and you will see all the expense entries in JSON format.

[
   {
  "id": 1,
  "item": "Pizza",
  "amount": 10,
  "category": "Food",
  "location": "KFC",
  "spendOn": "2020-05-26 10:10",
  "createdOn": "2020-05-26 10:10"
   },
   {
  "id": 2,
  "item": "Pizza",
  "amount": 14,
  "category": "Food",
  "location": "Mcdonald",
  "spendOn": "2020-06-01 18:14",
  "createdOn": "2020-05-01 18:14"
   },
   {
  "id": 3,
  "item": "Pizza",
  "amount": 15,
  "category": "Food",
  "location": "KFC",
  "spendOn": "2020-06-06 16:18",
  "createdOn": "2020-06-06 16:18"
   },
   {
  "id": 4,
  "item": "Pizza",
  "amount": 9,
  "category": "Food",
  "location": "Mcdonald",
  "spendOn": "2020-05-28 11:10",
  "createdOn": "2020-05-28 11:10"
   },
   {
  "id": 5,
  "item": "Pizza",
  "amount": 12,
  "category": "Food",
  "location": "Mcdonald",
  "spendOn": "2020-05-29 09:22",
  "createdOn": "2020-05-29 09:22"
   }
]

Finally, we created a simple CURD REST API for expense entry, and we can access the REST API from our Angular application to learn the HttpClient module.

Configure Http client

Let’s learn how to configurethe HttpClientservice. The HttpClientservice is available inside theHttpClientModulemodule, which is available inside the @angular/common/http package.

To register HttpClientModule module. You need to import the HttpClientModule in AppComponent:

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

Include HttpClientModule in imports meta data of AppComponent.

import{ Component }from'@angular/core';import{ CommonModule }from'@angular/common';import{ RouterOutlet }from'@angular/router';import{ HttpClientModule }from'@angular/common/http';@Component({
  selector:'app-root',
  standalone:true,
  imports:[CommonModule, RouterOutlet, HttpClientModule],
  templateUrl:'./app.component.html',
  styleUrl:'./app.component.css'})exportclassAppComponent{
  title ='myApp';}

Create expense service

Let us create a new servicenamed ExpenseEntryServicein your ExpenseManagerapplication to interact withExpense REST API. ExpenseEntryService will get the latest expense entries, insert new expense entries, modify existing expense entries, and delete the unwanted expense entries.

Open the command prompt and go to the project root folder:

cd /go/to/expense-manager

Start the application by running the below command:

ng serve

Run the below command to generate an Angular service with the name ExpenseService:

ng generate service ExpenseEntry

This will create two Typescript files (expense entry service & its testing file) as specified below:

CREATE src/app/expense-entry.service.spec.ts (364 bytes) 
CREATE src/app/expense-entry.service.ts (141 bytes)

Now, openthe ExpenseEntryService (src/app/expense-entry.service.ts) file import ExpenseEntry, throwError, and catchErrorfrom the rxjs library, and importHttpClient, HttpHeaders, andHttpErrorResponsefrom @angular/common/http package:

import{ Injectable }from'@angular/core';import{ ExpenseEntry }from'./expense-entry';import{ throwError }from'rxjs';import{ catchError }from'rxjs/operators';import{ HttpClient, HttpHeaders, HttpErrorResponse }from'@angular/common/http';

Inject the HttpClient service into our service:

constructor(private httpClient : HttpClient){}

Create a variable, expenseRestUrl to specify the Expense Rest API endpoints:

private expenseRestUrl ='http://localhost:8000/api/expense';

Create a variable,httpOptionsto set the HTTP Header option. This will be used during the Http Rest API call by the AngularHttpClientservice:

private httpOptions ={ 
   headers:newHttpHeaders({'Content-Type':'application/json'})};

The complete code is as follows:

import{ Injectable }from'@angular/core';import{ ExpenseEntry }from'./expense-entry';import{ Observable, throwError }from'rxjs';import{ catchError, retry }from'rxjs/operators';import{ HttpClient, HttpHeaders, HttpErrorResponse }from'@angular/common/http';@Injectable({
   providedIn:'root'})exportclassExpenseEntryService{private expenseRestUrl ='api/expense';private httpOptions ={
  headers:newHttpHeaders({'Content-Type':'application/json'})};constructor(private httpClient : HttpClient){}}</pre>


HTTP GET



The HttpClient provides a get() method to fetch data from a web page. The main argument is the target web URL. Another optional argument is the option object with the below format −



{
   headers?: HttpHeaders |{[header:string]:string|string[]},
   observe?:'body'|'events'|'response',

   params?: HttpParams|{[param:string]:string|string[]},
   reportProgress?:boolean,
   responseType?:'arraybuffer'|'blob'|'json'|'text',
   withCredentials?:boolean,}



Here,




headers: HTTP Headers of the request, either as string, an array of string, or an array of HttpHeaders.



observe: Process the response and return the specific content of the response. Possible values are body, response, and events. The default option of the observer is the body.



params: HTTP parameters of the request, either as string, array of string, or array of HttpParams.



reportProgress: Whether to report the progress of the process or not (true or false).



responseType: Refers to format of the response. Possible values are arraybuffer, blob, JSON, and text.



withCredentials: Whether the request has credentials or not (true or false).




Note: All options are optional, you can choose to use them or not.



The get() method returns the response of the request as Observable. The returned Observable emits the data when the response is received from the server.



The sample code to useget()method is as follows:



httpClient.get(url, options).subscribe((data)=>console.log(data));



Typed Response



Theget()method has an option to return observables, which emits a typed response as well. The sample code to get a typed response (ExpenseEntry) is as follows:



httpClient.get<T>(url, options).subscribe((data:T)=>console.log(data));



Handling errors



Error handling is one of the important aspects of HTTP programming. Encountering errors is one of the common scenarios in HTTP programming.



Errors in HTTP Programming can be categorized into two groups −




Client-side issues can occur due to network failure, misconfiguration, etc. If a client-side error happens, then theget()method throwsan ErrorEventobject.



Server-side issues can occur due to wrong URL, server unavailability, server programming errors, etc.




Let us write a simple error handling for our ExpenseEntryService service.



privatehttpErrorHandler(error: HttpErrorResponse){if(error.error instanceofErrorEvent){console.error("A client side error occurs. The error message is "+ error.message);}else{console.error("An error happened in server. The HTTP status code is "+ error.status +" and the error returned is "+ error.message);}returnthrowError("Error occurred. Pleas try again");}



The error function can be called in get() as specified below −



httpClient.get(url, options).pipe(catchError(this.httpErrorHandler).subscribe((data)=>console.log(data))



Handle failed request



As we mentioned earlier, errors can happen, and one way is to handle them by implementing the error handling. Another option is to try for a certain number of times. If the request fails due to a network issue or the HTTP server is temporarily offline, the next request may succeed.



We can usethe rxjslibrary"retry"operator in this scenario as specified below :



httpClient.get(url, options).pipe(retry(5),catchError(this.httpErrorHandler)).subscribe((data)=>console.log(data))



Fetch expense entries



Let us do the actual coding to fetch the expenses from Expense Rest API in our ExpenseManager application.



Open the command prompt and go to the project root folder:



cd /go/to/expense-manager




Start the application by running the following command:



ng serve




Now, add the getExpenseEntries() and httpErrorHandler() methods in ExpenseEntryService (src/app/expense-entry.service.ts) service as follows:



getExpenseEntries(): Observable<ExpenseEntry[]>{returnthis.httpClient.get<ExpenseEntry[]>(this.expenseRestUrl,this.httpOptions).pipe(retry(3),catchError(this.httpErrorHandler));}getExpenseEntry(id:number): Observable<ExpenseEntry>{returnthis.httpClient.get<ExpenseEntry>(this.expenseRestUrl +"/"+ id,this.httpOptions).pipe(retry(3),catchError(this.httpErrorHandler));}privatehttpErrorHandler(error: HttpErrorResponse){if(error.error instanceofErrorEvent){console.error("A client side error occurs. The error message is "+ error.message);}else{console.error("An error happened in server. The HTTP status code is "+ 
		 error.status +" and the error returned is "+ error.message);}returnthrowError("Error occurred. Pleas try again");}



Here,




getExpenseEntries() calls the get() method using expense end point and also configures the error handler. Also, it configures httpClient to try for maximum of 3 times in case of failure. Finally, it returns the response from server as typed (ExpenseEntry[]) Observable object.



getExpenseEntry is similar to getExpenseEntries() except it passes the id of the ExpenseEntry object and gets ExpenseEntry Observable object.




The complete coding of ExpenseEntryService is as follows:



import{ Injectable }from'@angular/core';import{ ExpenseEntry }from'./expense-entry';import{ Observable, throwError }from'rxjs';import{ catchError, retry }from'rxjs/operators';import{ HttpClient, HttpHeaders, HttpErrorResponse }from'@angular/common/http';@Injectable({

   providedIn:'root'})exportclassExpenseEntryService{private expenseRestUrl ='http://localhost:8000/api/expense';private httpOptions ={
  headers:newHttpHeaders({'Content-Type':'application/json'})};constructor(private httpClient : HttpClient){}getExpenseEntries(): Observable&lt;ExpenseEntry[]&gt;{returnthis.httpClient.get&lt;ExpenseEntry[]&gt;(this.expenseRestUrl,this.httpOptions).pipe(retry(3),catchError(this.httpErrorHandler));}getExpenseEntry(id:number): Observable&lt;ExpenseEntry&gt;{returnthis.httpClient.get&lt;ExpenseEntry&gt;(this.expenseRestUrl +"/"+ id,this.httpOptions).pipe(retry(3),catchError(this.httpErrorHandler));}privatehttpErrorHandler(error: HttpErrorResponse){if(error.error instanceofErrorEvent){console.error("A client side error occurs. The error message is "+ error.message);}else{console.error("An error happened in server. The HTTP status code is "+ error.status +" and the error returned is "+ error.message);}returnthrowError("Error occurred. Pleas try again");}}</pre>


Open theExpenseEntryListComponent and go to the "src-entry-list-entry-list.component.ts" file and injectExpenseEntryServicethrough the constructor as specified below:



constructor(private debugService: DebugService,private restService : 
ExpenseEntryService ){}



Change thegetExpenseEntries()method, and call the "getExpenseEntries()" method fromExpenseEntryServiceinstead of returning the mock items:



getExpenseItems(){this.restService.getExpenseEntries().subscribe( data =− this.expenseEntries = data );}



The completeExpenseEntryListComponentcodes are as follows −



import{ Component, OnInit }from'@angular/core';import{ ExpenseEntry }from'../expense-entry';import{ DebugService }from'../debug.service';import{ ExpenseEntryService }from'../expense-entry.service';@Component({
   selector:'app-expense-entry-list',
   templateUrl:'./expense-entry-list.component.html',
   styleUrls:['./expense-entry-list.component.css'],
   providers:[DebugService]})exportclassExpenseEntryListComponentimplementsOnInit{
   title:string;
   expenseEntries: ExpenseEntry[];constructor(private debugService: DebugService,private restService : ExpenseEntryService 
   ){}ngOnInit(){this.debugService.info("Expense Entry List component initialized");this.title ="Expense Entry List";this.getExpenseItems();}getExpenseItems(){this.restService.getExpenseEntries().subscribe( data =>this.expenseEntries = data );}}



Finally, check the application and you will see the below response:







HTTP POST



The HTTP POST is similar to HTTP GET except that the post request will send the necessary data as posted content along with the request. HTTP POST is used to insert new records into the system. HttpClientprovidesthe post()method, which is similar toget(), except it supports an extra argument to send the data to the server.



Let us add a new method, addExpenseEntry() in our ExpenseEntryService to add new expense entry as mentioned below:



addExpenseEntry(expenseEntry: ExpenseEntry): Observable<ExpenseEntry>{returnthis.httpClient.post<ExpenseEntry>(this.expenseRestUrl, expenseEntry,this.httpOptions).pipe(retry(3),catchError(this.httpErrorHandler));}



HTTP PUT



The HTTP PUT is similar to HTTP POST requests. This is used to update existing records in the system. The HttpClientprovidesa put()method, which is similar topost().



Update expense entry



Let us add a new method, updateExpenseEntry() in our ExpenseEntryService to update existing expense entry as mentioned below:



updateExpenseEntry(expenseEntry: ExpenseEntry): Observable<ExpenseEntry>{returnthis.httpClient.put<ExpenseEntry>(this.expenseRestUrl +"/"+ expenseEntry.id, expenseEntry,this.httpOptions).pipe(retry(3),catchError(this.httpErrorHandler));}



HTTP DELETE



The HTTP DELETE is similar to the HTTP GET request. It is used to delete entries in the system. The HttpClientprovidesa delete()method, which is similar toget().



Delete expense entry



Let us add a new method, deleteExpenseEntry() in our ExpenseEntryService to delete existing expense entries as mentioned below:



deleteExpenseEntry(expenseEntry: ExpenseEntry |number): Observable<ExpenseEntry>{const id =typeof expenseEntry =='number'? expenseEntry : expenseEntry.id
   const url =${this.expenseRestUrl}/${id};returnthis.httpClient.delete<ExpenseEntry>(url,this.httpOptions).pipe(retry(3),catchError(this.httpErrorHandler));}