Angular JS 6 - Using Fetch API in Angular Apps

Sharing buttons:

hey everyone welcome back to a brand new

video on my channel so in this short

video I am going to show you how you can

use the Java scripts latest fetch API to

make the asynchronous Network requests

inside an angular 6 application so

normally what we do is we use the

angular very on HTTP module but I

thought why not try using the fetch API

instead of using the HTTP module to see

if it works or not and you must be

thinking why do we even do that and the

answer to that question is that we

should always keep trying to look for

better ways to do things so I was

thinking for some time about using fetch

API in angular and I found that it

actually works flawlessly although I

haven't tried this in all the browser's

and also I have only tested a very

simple get request

so before you watch this video I would

like to suggest to take the information

here with a grain of salt and do

detailed analysis of the fetch API for

all of its pros and cons before deciding

to use it in your applications I am

saying this because angular provides

extensive documentation and a rich

community support for its modules and

fetch API is still kind of new although

it has been like 2 years since it has

been released but there could be

situations where the fetch API will not

work as intended when using it in any

angular application browser

compatibility is another area which

needs to be looked at but it still it

should not be hurt full mature browser

compatibility is another area which

needs to be looked at but still it

should not hurt to use the fetch API in

small angular applications because it

has a clean coding style and you will be

using native JavaScript code directly

instead of relying upon you know

third-party library code to execute

network requests alright so now let's

quickly jump on to the code example I'm

going to code the example for this test

angular app in

Visual Studio core and I'm using angular

6 for this so I have already created a

new application as you can see there is

the app component and there is also a

routing enabled so what I will do is I

will simply make a network request to a

publicly available get request which

will provide us some sample data and I

will display that data on an HTML page

so first I will use the angular's HTTP

module to do that and after that I will

use the fetch API so that we can see the

comparison between these two coding

styles all right so first what I will do

is I am going to simply run this

application and I will show you the

public URL which I am going to use to

get the sample data or test data so for

that I am using this website which is

Jason placeholder dot type a code comm

it provides a number of different

categories for different kinds of data

which we can use to test our UI

components and for this example I am

going to use this posts URL so I will be

making a cat request to this URL to get

this data for the number of different

posts so let's just run this application

now the the default angular app runs on

the port 4200 of localhost and I have

actually removed the default contents

with this text which is tested angular 6

app so now what I will do is first I

will simply add another terminal so that

I can add new components to this sample

application so for that I'm going to use

ng generate component and then I am

going to name it posts you can actually

write this command you know

short informant g4 generate and c4

component so that if in your application

you have to create so many different

components at multiple times you don't

need to write this and I command you

just need to write this the the short

informant and a new component is created

for us so first I will simply test if

this component is working with our

routing so for that I'm simply going to

remove this text and I'm going to add a

link over here let's call it show posts

and I'm going to link it to the route

which we are going to create for posts


we will also need to create the router

outlet element which will contain the

the contents of any routing routing

module which is going to be hooked with

the routes which were going to create in

this example I'm just going to create of

a single route so path I am going to use

posts and for component I am going to

use the posts component so what I will

write this then the code editor will

automatically generate and import a

statement for us which is a good thing

so now I'm going to test it but before

that actually no you know what I don't

need to do anything else I can simply

click on it and then the routing is

working perfectly fine now to fetch the

data what I will do is I will simply

create a service for that which we can

inject into the modules to be able to

use it and to add a new service we just

need to write the command in the

terminal ng generates service and the

name of the service I am going to call

it data and similar to the above command

to generate a new component we can write

this in a shortened format which is n

ggas and then the name of the service

now in this JIRA service what I will do

is I will first import the reference of

the HTTP module so it should be inside

angular common and then HTTP

and now what I will do is I will simply

inject this service into this

constructor let's call it as TTP and

then s2 typic client and that's it now

I'm going to create a function which

will fetch the posts so there will be a

single return statement this dot HTTP

dot get and in the cat function we will

need to provide the URL of the of the we

get URL which we are going to hit to get

the data all right that's it that's

pretty much it that we need to do for

this service and now we need to go in

the post component so on the post

component what I am going to do is first

I am going to import the references of

the modules which we will need to use

the data service which which is which we

just created and first I am going to

import the data service itself so it is

up one level in the folder and then we

will also need the RX g x library to not

subscribe to the results which we will

get after the get request

actually I'm not able to use this name

you know what let's call it observable

alright and in the constructor we'll

need to inject this data service so that

we will be able to use it and for that

I'm just going to create a private

property over here and then now in the

on in it what we will do is we will

simply fetch the results by calling the

service and then we will assign the

results into a property so that we can

use that property into the HTML page for

the for the templating part and for that

I'm going to create public property over

here let us call it posts now in the ng

on in it what we can do is we can simply

use this service to get the posts list

now since we are using the RX JS library

we can use the in subscribe map method

and in the SUBSCRIBE method we can

simply write an arrow function so for

data we need to set the posts with data

and that's it now in this sentiment page

I'm going to remove this paragraph and

then I'm simply going to add a div over

here and then let's write an NG for

iterative loop now for every post of

course we are going to repeat this div

and I'm going to use an h3 element for

the title of the post and then I'm going

to use a pair for the body part so I'm

just going to check out the names of the

properties the names are title

if you can see it you know there is a

title in there is the body so let's put

the interpolation template and post dot

idol and post dot body alright so now

let's see if our code is working I think

we have covered everything

yep it's working all of the posts are

listing over here this is the title and

this is the body although we can do much

more with this design but I mean this

video is not for that I mean this video

is just for the comparison between D

between using the angular 6 HTTP module

and using the fetch API to make the

network requests now what I will do is I

will simply convert this code which is

in this data service and this post

component from using the HTTP module to

using the fetch API so let's do that

so first I am going to comment on this

piece of code and then what I will do is

I will simply return the results of the

fetches statement which will use the

same world to make the cat request to

make to get the data of the posts and

then inside the post components we can't

use this code because subscribe will not

work on fetch so fetch API returns a

promise now we can use the use the

period our value in two different ways

the first way is what you can do is we

can simply call this dot data dot get

posts and this will return a promise so

that we can use the den and catch


so the inside the 10 function we can

provide a callback in the form of an

arrow function so the callback will have

the argument of the response now to get

the data you need to pull response dot

JSON to get JSON data we can also add

another step to check if the if the if

the result of this request is a success

or not by checking this status code but

it should be successful so to keep

things short I'm just going to directly

get the JSON data and then the JSON data

also returns the adjacent function I'm

sorry will also return a promise and

then we can chain it then function after

that so this then will also accept a

function as an argument and I'm going to

use an arrow function and this callback

function value we have will be will be

having the data as the argument and then

we can simply set this dot force is

equal to data now I can easily use this

keyword inside this function because

what happens is the arrow functions will

not have their own this and only normal

functions have their own this keyword if

you if you understand what I mean

because this will always point to the

calling context but in the case of arrow

functions this will always point to the

outermost functions this if it makes any

sense so this is going to be pointing to

this this class this posts component so

we will be able to access this posts

from this this keyword and inside catch

if you want to you can provide a

callback function to handle and kind of


all right so now let's see if this code

is working or not and this is still

working which means that fetcher K is

working all right so now what I will do

is I will convert this code which is

using the promise returned by the fetch

API into a function which is going to be

an async function so this approach is

going to be a lot cleaner than what we

have done here and I will show you how

it's done

so first I am simply going to create a

new function which is going to be an

async function and I'm going to call it

get posts and inside this get posts

first we are going to get the response

which is which will be returned from

calling this services get posts function

and then we will get the JSON data from

the response and then we will set the

value of this of this posts object with

the data

which will be the JSON data so now first

let's get response and that response

equals to this dot Jaradat cat posts and

because this is an async function and

this is a Seng request we also need to

write the await keyword and after this

we can get the data by again writing an

await keyword and then this time we are

going to call response dot JSON

now this jason function as I have

already told you is also going to return

a promise object so we can write our

wait keyword before that to wait for the

response or the adjacent results and now

after this all when employees we just

want to set the posts objects value with

data which will be returned from it and

now we need to comment out this existing

code in the ng on on init event and we

need to call this async function get


alright now let's see if food is working

so yeah it's working we are still able

to fetch the number of posts from the

from the public URL so yeah that's

pretty much it for this video guys and I

hope that you have liked the video and

if you do please subscribe to my channel

because it's always a great help to know

that more and more people are following

the videos which I am creating and if

you have any questions or if you have

any new ideas for more videos then

please use the comment section all you

know what just simply say hi and I will

respond to that so yeah thanks for

watching the video guys and I will see

you in the next one have a great day