How to fetch two api in javascript
Wait for Multiple Fetch Requests to Finish | JavaScript Tutorial
Timecodes:
hello everyone and welcome to this
tutorial so today what I'm going to be
showing you is how you can wait for
multiple fetch requests to complete or
doing something like rendering their
content to the page so in this example
I'm fetching three types of Json data
posts comments and photos from this API
that returns fictitious Json data so to
handle requests together the first thing
that we want to do is to place all of
the requests together in an array so
I'll just copied them in
and also add a comma and remove the
spacing
and now because each fetch request is a
promise we can pass this array of
promises into a method that is available
on the promise object that is
promise.all so a pass the array in here
so you may be familiar with this object
as a way of creating new promises by
putting the new operator before it well
it also handles objects of the type it
produces so promises if you put those in
an array like we have done and now you
can access the result of these fetch
requests in the same way that you would
or a regular fetch request so you
usually access the response object by
using the then method and then in the
function that you pass into it you have
available to you as a parameter
automatically the response object this
time we're going to have an array of
response objects so if we take a look at
what's been logged to the console you
see that we have an array that can
contains three response objects and what
we want to do for each of these response
objects is read the body of each
readable stream that's going to give us
the Json data so we can't just call res
dot Json here because res is an array
and also something to know is that res
dot Json returns a promise so we need to
wait for that just like we did the
handling of the array so again we're
going to use the promise.all trick here
and as you already saw this expects an
array so what we're going to do is call
res dot map which will return an array
of the return values of the function
that we're passing in
so I'll call that so what I'm going to
return each time
is the current item
which is a response object and I'm
calling Json on each response object so
this returns a promise so what we end up
with as the return value of calling map
on the response object array is an array
of promises that are reading the
readable stream on each response object
and then promise.org we can access its
result in the same way that we did
before by calling dot then and then the
result of it is going to be available as
a parameter inside the function we pass
into it and this time it's going to be
the data itself so I'll just log that to
the console and what we should have now
is an array of Json data and for error
handling you can add a catch statement
to the outer promise.all so this is
going to catch any errors including in
the inner premise.org and I'll just log
here a message message to the console if
it fails saying multiple batch failed
so as you saw this solution is working
we are getting back the three bits of
Json data but we do have the star of
some annoying nesting going on here so
with the promise to all inside the
promise.all method so you can fix this
by using async await syntax instead so
to start using a weight inside a
function you use async before it so I'll
just call this function main so with the
first promise to all I can use a weight
inside this function to await its result
and I'll save the result there as res
then I'm going to be doing exactly the
same thing as I was before with
promise.all and map so again I'm going
to await promise.org and save result of
that as data and then I can log data as
the last thing that I'm doing inside
this function and of course I also need
to call the function and I'm going to
comment out what we're doing here with
the native promise syntax now to add
error handling to this function you can
wrap everything that we were just doing
inside a try block and then create a
catch block or the error
so
I'll say here once log
okay so if I test this now we should
still be getting back the same result as
before with the three Json data files so
we're getting the same result back but
now in the syntax we are avoiding the
nesting that we saw with the multiple
almost to all methods and we could go on
here and await more promises and we
wouldn't end up with any more nesting so
this solution will wait for all three of
the fetch requests but there is a
behavior about promise.org that some
people don't like and it's to do with
what happens when one of the fetch
requests doesn't resolve but it rejects
so what I'm going to do here is to
create a promise that is going to reject
immediately so if we take a look at the
result now
you see that we just get the error
message so even though the fetch
requests for posts and photos would
probably resolve successfully because
the second promise failed the entire
array of promises will not be consumed
and we just get an error message so some
people refer to this as fail class
Behavior sometimes it might be what you
want sometimes it might not be and you'd
still like to work with the promises
that were successful so it is possible
to work with successful promises only so
there's another method on the promise
object for this and that's promise dot
or settled so I'm going to comment out
what comes after it and console log the
result that we get back from promise.all
settled because it's a little different
from what we get back from promise.all
so what we have instead of an array of
response objects is an array of objects
with two values each one has status
letting us know whether the promise
fulfilled or rejected and if it
fulfilled a value property if it
rejected a reason property which
sometimes gives us more information
about why it failed in this case the
value is undefined because I just called
from a stop reject so what I want to do
here is convert this array of objects
into an array of response objects like
we had last time so to extract these two
response objects and to place them in an
array so to do that I'm going to create
a new array so I'll call that success
array and I'm going to iterate through
each one of those response objects in
order to extract the data from it and
I'm going to be using the status
property to determine whether a response
object should end up in the array or
whether it should be asked over so I'm
going to check here if the current
object dot status property is equal to
the build
then I want to push the value property
of that object into the success array so
that I can call push on the success
array and I'm going to be pushing in
object dot value and now we can just
basically follow the same steps as
before so I'll get rid of the console
logs here so I'm going to uncomment the
code that we had before the only
difference is that the array of response
objects is now not res it's the success
array that we created so hopefully now
we have two Json data files coming back
to us which correspond to the two
successful virtual quests so sometimes
you may prefer this Behavior where you
just want the data back that succeeded
and for one better request not to throw
an error that ends the entire process so
sometimes you may prefer this approach
where you want to get back what succeeds
and you don't want one third fetch
request to end the entire process but
you probably do want an error to be
thrown if none of the fetch requests
work so at the moment what if all three
of the federal requests fail
so I'll insert from the stop project in
place of each of the pet requests it's
going to return an empty array so to
handle this you can add an if statement
checking to see if the success array has
a length of none which means that none
of batch requests were successful then
throw a new error
and you could say something along the
line so
batches failed
and then in the catch statement so now
they'll be using promise to all settled
this catch block will only run if all
three of the fetch requests fail so what
I'm going to do here is log the error
that I entered before inside the if
statement where I was checking the
success array and now you can see if all
of the fetches fail then it will help
the error if not then as you saw before
you'll get back as an array the Json
data for the fetch requests that were
successful so that is it for this
tutorial on how you can wait for
multiple fetch requests to resolve
before doing something I hope you found
this tutorial useful if you did please
consider hitting the like button down
below this video it helps us with the
algorithm and others to find this video
and if you'd like to see more content
like this from us in the future don't
forget you can subscribe to the channel
Related queries:
fetch api javascript get example
fetch vs get api
