In the last section we were able to make a successful request over to the UN splash API using ex-US.
Anytime that a user entered the search term and then submitted the form.
So now we need to somehow figure out how we can get the data that is returned from this request and
use it to show a list of images on the screen the entire flow or the process for implementing this is
going to be very similar to the series of steps that we went through on a previous application.
When we use that geo location API.
So let's have a quick discussion on how we're going to do this.
All right so here's what's going to happen in a time series.
We first start out by rendering our application the app component is going to render itself one time
without any images.
Remember when we first load or application we have no images whatsoever.
It's only when a user enters a search term and then hits enter that are on search submit method gets
called and we make an actual request over to Splash when we make that request over to an splash.
It's going to take some amount of time to get a response from that API.
So we're going to be essentially more or less sit around and wait for a response when we finally get
a response.
We then want to use that image data to update what our app component is showing in order to get our
app component to the render.
We're going to call set state on it and set our images as state on the app component that will cause
the app component to the render and we can use that as an opportunity to then show a list of images.
Now as a quick reminder unsane have like you know our app component's show the images.
Well in the original plan we put together we had said that we would make a new component called image
list that would be responsible for showing the list of images.
So we're not going to have app showed the images itself.
With that in mind right now let's set a more immediate or short term goal and just say that we want
the app to print out the number of images that were fetched.
I think that would be a good short term goal.
OK.
So the first thing we need to do is find are on some search submit method right here and we need to
somehow write some code inside of a year to get a notice or a notification or a tap on the shoulder
when this request is complete.
Remember this network request is a asynchronous request it will take some amount of time for X-post
to reach out to on splash and then get a response back by the time we get a response from this request
we will have already exited the on search submit method.
Now in order to get a little notification of when the request is completed we have two different options.
There's one option that you're going to see and a lot of documentation that's a little bit more challenging
and another option that's a little bit newer but way way way easier to write out in code.
I'm going to show you both methods so you understand them very simply.
All right so the first thing to do is find the actual call and then on the very end of the X you just
call I'm going to remove that semi-colon right there.
Whenever we make a request with X-posts it returns an object called a promise a promise is a object
that will essentially give us a little notification when some amount of work like a network request
is completed in order to get a little tap on the shoulder when the request is completed.
We train on a dot then function like so this does it then function is going to be called.
It's at some point in the future or sees me we passed the dot then a function usually an arrow function
like so and this arrow function will be called at some point in the future.
That's much better.
So this little arrow function we're putting in right there is essentially a callback that will be invoked
with whatever data that we got back from the on Splash API.
Right now let's refer to that data as a response and we'll just console log that response and just see
what happens.
For now it's going to save this and we'll run this code and see what happens.
To back over my application I'm going to open up my console.
I'll search for cars again.
And here's the console log that we just got out of that door then statement.
So it looks like the response we get back has a lot of different properties attached to it.
We get the status text a status code 200 means that the request was successful.
We see some config around the request that was made data around the request itself but all this stuff
is totally irrelevant.
The thing we really care about is this data property right here.
And more precisely the results property so response dot data dot results contains a list of images that
we care about.
With that in mind let's update the console log one more time and make sure that we can just directly
access that list of images.
So I would say response data that was the results yet results and then I'll say this again.
OK.
So our council was reset because the page loaded all and cars a second time and now we see that we get
this nice council log of an array of objects and each object represents one distinct image OK.
So that's how we get access to that list of images.
By using this approach right here of chaining on a dot then statement.
So this is the first method.
That's a little bit harder to use.
Any sound that you want to get a response from some asynchronous request.
You can always use this then statement any time that you know that you are working with a promise.
So let's now take a look at the alternate method.
Like I said this alternate method for getting a little notification of when we get this response back
is a little bit easier to write out.
All right so I'm going to remove the Dathan statement.
I'm going to find my own search submit function and I'm going to market with the async keyword like
so by putting the async keyword in front of the function name.
That allows us to use the async or wait syntax inside this function.
What that really means is that in front of the network request that we make to ex-U.S. right there I'm
going to put a wait keyword and then in front of that I'm going to assign a new variable called response
like so.
So in total I have Konst response equals a wait ASIO's and then down here after that entire request
I can count the log out response that data got results like so.
All right before I tell you anything about this syntax right here let's save the file and then run it
again very quickly so I'll put in a search term of cars and hit enter and I see again I get my array
of results right here just as we did previously.
So we have the promise space syntax that uses a then statement that will be called Anytime the request
gets completed.
Alternatively we can use this async await syntax.
In my opinion a sink a weight is far easier to understand and to write out in code than making use of
the promise.
When do you want to use the async syntax.
You just put that async keyword in front of the method name you find whatever is returning or whatever
is taking some time to resolve.
In this case it is the network request with X-post get.
And we put the a week key word in front of that and then whatever gets returned from this entire statement
right here.
We will assign to some variable as we usually do and then we can freely work with that variable later
on.
We're going to be using this async 08 syntax many times throughout this course.
So we'll get a lot of practice with it and some practice with some variations that add in some pretty
good error handling with it as well.
All right.
So we now are able to get our list of images here.
Let's take a quick pause.
When we come back the next section we're going to update our app component to have a state property
and make sure that we set our lists of images on that state.
So a quick pause and I'll see you in just a minute.