API Calls with HTTP Client Service

Posted By : Prince Kumar | 31-Oct-2018
Angular

Recently Angular 4.3 has introduced the new HttpClient service that has replaced the old Http Service that was used earlier in the Angular 2 version.

Most web applications communicate with backend services over the HTTP protocol. The modern browsers support different APIs for making HTTP requests:   

 
1) The XMLHttpRequest interface
2) The fetch() API.

 

The HttpClient in @angular/common/HTTP offers a simplified client hypertext transfer protocol API for Angular applications that rests on the XMLHttpRequest interface exposed by browsers. 


Additional edges of HttpClient include testability options, typed request and response objects, request and response interception, observable APIs, and streamlined error handling.

 

Advantages of HTTP Client Service :

It is easy to use, simple, and more powerful for making HTTP requests.

The back-end exposes the following endpoints:

For chairs, movies, and foods we can use GET/API/chairs, GET /API/movies, and GET/API/foods respectively.
 

They return an array in JSON format consisting all the Book, Movie, or Food Objects.

Apart from this, we also have the below-mentioned APIs:

 

POST /API/foods- This accepts JSON Object for creating a new object in back-end store. Then we get a response 200 OK in case of success.
 
 
PUT /API/foods/{foods_id} - For updating an existing Food Object. Again, this also accepts JSON object. Then we get a response 200 OK in case of success.
 
 
DELETE /API/foods/{foods_id} - For deleting an existing Food object. But this doesn't require a response body. This returns a JSON obj as it existed earlier.
 

CODE -  HERE

module.exports = app

 

 
const express = require('express');
const bodyParser = require('body-parser');
const path = require('path');
  
const app = express();
app.use(express.static(__dirname));
  
app.use(bodyParser.json()); // support json encoded bodies
 
 
 
var foods = [
  { "id": 1, "name": "Donuts" },
  { "id": 2, "name": "Pizza" },
  { "id": 3, "name": "Tacos" }
];
  
var books = [
  { "title": "Hitchhiker's Guide to the Galaxy" },
  { "title": "The Fellowship of the Ring" },
  { "title": "Moby Dick" }
];
  
var movies = [
  { "title": "Ghostbusters" },
  { "title": "Star Wars" },
  { "title": "Batman Begins" }
];
  
// the "index" route, which serves the Angular-2 application
app.get('/', function (req, res) {
    res.sendFile(path.join(__dirname,'/dist/index.html'))
});
 
 
 
app.get('/api/books', function (req, res) {
    res.send(books);
});
  
// the GET "movies" API endpoint
app.get('/api/movies', function (req, res) {
    res.send(movies);
});
 
 
 
<p>app.get('/api/food', function (req, res) {
    res.send(foods);
});
  
// POST endpoint for creating a new food
app.post('/api/food', function (req, res) {
    // calculate the next ID
    let id = 1;
    if (foods.length > 0) {
        let max = Math.max.apply(Math, foods.map(function (f) { return f.id; }));
        id = max + 1;
    }
    let new_food = {"id": id, "name": req.body.name};
    foods.push(new_food);
    res.send(new_food);
});</p>
 
 
 
app.put('/api/food/:id', function (req, res) {
    let id = req.params.id;
    let f = foods.find(x => x.id == id);
    f.name = req.body.name;
    res.send(f);
});
 
 
app.delete('/api/food/:id', function (req, res) {
    let id = req.params.id;
    let f = foods.find(x => x.id == id);
    foods = foods.filter(x => x.id != id);
    res.send(f);
});
  
// HTTP listener
app.listen(3000, function () {
    console.log('Example listening on port 3000!');
});
 
Related Tags
cloud computing
saas
PWA
Web Apps
Java
nodejs
javascript
php
vue.js
Spring boot
mysql
ReactJS
Django
plugin
Angular2
angularjs
bootstrap
html
Laravel
jquery
grails
LMS
Java Virtual Machine
html5
Mean stack
Moodle
oops
Shopify
reverseajax
Knockoutjs
ngrok
Meteor

About Author

Author Image
Prince Kumar

Prince is a sharp and intellectual UI Developer, he has a good knowledge of HTML. CSS, Jquery. His hobbies are reading books, listening music and net surfing,

Request for Proposal

Name is required

Comment is required

Sending message..