1 00:00:00,730 --> 00:00:06,940 In the last section we were able to make a successful request over to the UN splash API using ex-US. 2 00:00:06,940 --> 00:00:10,760 Anytime that a user entered the search term and then submitted the form. 3 00:00:10,910 --> 00:00:15,760 So now we need to somehow figure out how we can get the data that is returned from this request and 4 00:00:15,760 --> 00:00:21,280 use it to show a list of images on the screen the entire flow or the process for implementing this is 5 00:00:21,280 --> 00:00:25,520 going to be very similar to the series of steps that we went through on a previous application. 6 00:00:25,630 --> 00:00:27,980 When we use that geo location API. 7 00:00:28,060 --> 00:00:31,410 So let's have a quick discussion on how we're going to do this. 8 00:00:31,420 --> 00:00:34,340 All right so here's what's going to happen in a time series. 9 00:00:34,360 --> 00:00:39,430 We first start out by rendering our application the app component is going to render itself one time 10 00:00:39,610 --> 00:00:41,170 without any images. 11 00:00:41,170 --> 00:00:45,310 Remember when we first load or application we have no images whatsoever. 12 00:00:45,550 --> 00:00:50,920 It's only when a user enters a search term and then hits enter that are on search submit method gets 13 00:00:50,920 --> 00:00:57,250 called and we make an actual request over to Splash when we make that request over to an splash. 14 00:00:57,270 --> 00:01:01,790 It's going to take some amount of time to get a response from that API. 15 00:01:02,040 --> 00:01:07,620 So we're going to be essentially more or less sit around and wait for a response when we finally get 16 00:01:07,620 --> 00:01:08,620 a response. 17 00:01:08,640 --> 00:01:14,340 We then want to use that image data to update what our app component is showing in order to get our 18 00:01:14,340 --> 00:01:15,750 app component to the render. 19 00:01:15,750 --> 00:01:23,180 We're going to call set state on it and set our images as state on the app component that will cause 20 00:01:23,180 --> 00:01:28,860 the app component to the render and we can use that as an opportunity to then show a list of images. 21 00:01:28,880 --> 00:01:33,120 Now as a quick reminder unsane have like you know our app component's show the images. 22 00:01:33,260 --> 00:01:37,850 Well in the original plan we put together we had said that we would make a new component called image 23 00:01:37,850 --> 00:01:41,430 list that would be responsible for showing the list of images. 24 00:01:41,450 --> 00:01:44,000 So we're not going to have app showed the images itself. 25 00:01:44,210 --> 00:01:49,220 With that in mind right now let's set a more immediate or short term goal and just say that we want 26 00:01:49,220 --> 00:01:52,360 the app to print out the number of images that were fetched. 27 00:01:52,490 --> 00:01:54,560 I think that would be a good short term goal. 28 00:01:55,290 --> 00:01:55,770 OK. 29 00:01:56,050 --> 00:02:01,930 So the first thing we need to do is find are on some search submit method right here and we need to 30 00:02:01,930 --> 00:02:07,450 somehow write some code inside of a year to get a notice or a notification or a tap on the shoulder 31 00:02:07,690 --> 00:02:09,620 when this request is complete. 32 00:02:09,640 --> 00:02:15,550 Remember this network request is a asynchronous request it will take some amount of time for X-post 33 00:02:15,550 --> 00:02:20,980 to reach out to on splash and then get a response back by the time we get a response from this request 34 00:02:21,160 --> 00:02:25,340 we will have already exited the on search submit method. 35 00:02:25,400 --> 00:02:31,130 Now in order to get a little notification of when the request is completed we have two different options. 36 00:02:31,250 --> 00:02:35,770 There's one option that you're going to see and a lot of documentation that's a little bit more challenging 37 00:02:36,160 --> 00:02:41,610 and another option that's a little bit newer but way way way easier to write out in code. 38 00:02:41,650 --> 00:02:45,540 I'm going to show you both methods so you understand them very simply. 39 00:02:45,540 --> 00:02:49,640 All right so the first thing to do is find the actual call and then on the very end of the X you just 40 00:02:49,700 --> 00:02:52,370 call I'm going to remove that semi-colon right there. 41 00:02:52,400 --> 00:02:58,770 Whenever we make a request with X-posts it returns an object called a promise a promise is a object 42 00:02:58,770 --> 00:03:03,930 that will essentially give us a little notification when some amount of work like a network request 43 00:03:04,020 --> 00:03:09,060 is completed in order to get a little tap on the shoulder when the request is completed. 44 00:03:09,090 --> 00:03:16,010 We train on a dot then function like so this does it then function is going to be called. 45 00:03:16,170 --> 00:03:22,940 It's at some point in the future or sees me we passed the dot then a function usually an arrow function 46 00:03:22,940 --> 00:03:26,720 like so and this arrow function will be called at some point in the future. 47 00:03:26,720 --> 00:03:28,340 That's much better. 48 00:03:28,370 --> 00:03:33,590 So this little arrow function we're putting in right there is essentially a callback that will be invoked 49 00:03:33,740 --> 00:03:37,790 with whatever data that we got back from the on Splash API. 50 00:03:37,790 --> 00:03:44,990 Right now let's refer to that data as a response and we'll just console log that response and just see 51 00:03:44,990 --> 00:03:45,500 what happens. 52 00:03:45,500 --> 00:03:50,550 For now it's going to save this and we'll run this code and see what happens. 53 00:03:51,770 --> 00:03:55,870 To back over my application I'm going to open up my console. 54 00:03:55,890 --> 00:03:57,640 I'll search for cars again. 55 00:03:57,780 --> 00:04:01,820 And here's the console log that we just got out of that door then statement. 56 00:04:02,220 --> 00:04:06,820 So it looks like the response we get back has a lot of different properties attached to it. 57 00:04:06,840 --> 00:04:12,070 We get the status text a status code 200 means that the request was successful. 58 00:04:12,120 --> 00:04:18,000 We see some config around the request that was made data around the request itself but all this stuff 59 00:04:18,000 --> 00:04:18,930 is totally irrelevant. 60 00:04:18,930 --> 00:04:22,160 The thing we really care about is this data property right here. 61 00:04:22,380 --> 00:04:29,790 And more precisely the results property so response dot data dot results contains a list of images that 62 00:04:29,790 --> 00:04:31,020 we care about. 63 00:04:31,140 --> 00:04:35,670 With that in mind let's update the console log one more time and make sure that we can just directly 64 00:04:35,670 --> 00:04:37,670 access that list of images. 65 00:04:37,680 --> 00:04:46,490 So I would say response data that was the results yet results and then I'll say this again. 66 00:04:47,310 --> 00:04:47,520 OK. 67 00:04:47,590 --> 00:04:52,540 So our council was reset because the page loaded all and cars a second time and now we see that we get 68 00:04:52,540 --> 00:04:59,800 this nice council log of an array of objects and each object represents one distinct image OK. 69 00:04:59,850 --> 00:05:02,090 So that's how we get access to that list of images. 70 00:05:02,160 --> 00:05:06,640 By using this approach right here of chaining on a dot then statement. 71 00:05:06,660 --> 00:05:08,380 So this is the first method. 72 00:05:08,400 --> 00:05:10,210 That's a little bit harder to use. 73 00:05:10,260 --> 00:05:14,050 Any sound that you want to get a response from some asynchronous request. 74 00:05:14,100 --> 00:05:18,770 You can always use this then statement any time that you know that you are working with a promise. 75 00:05:19,020 --> 00:05:21,120 So let's now take a look at the alternate method. 76 00:05:21,270 --> 00:05:25,890 Like I said this alternate method for getting a little notification of when we get this response back 77 00:05:25,890 --> 00:05:29,560 is a little bit easier to write out. 78 00:05:29,570 --> 00:05:31,930 All right so I'm going to remove the Dathan statement. 79 00:05:33,280 --> 00:05:39,520 I'm going to find my own search submit function and I'm going to market with the async keyword like 80 00:05:39,520 --> 00:05:43,320 so by putting the async keyword in front of the function name. 81 00:05:43,420 --> 00:05:47,740 That allows us to use the async or wait syntax inside this function. 82 00:05:47,740 --> 00:05:53,050 What that really means is that in front of the network request that we make to ex-U.S. right there I'm 83 00:05:53,050 --> 00:05:59,890 going to put a wait keyword and then in front of that I'm going to assign a new variable called response 84 00:05:59,890 --> 00:06:00,740 like so. 85 00:06:01,120 --> 00:06:07,980 So in total I have Konst response equals a wait ASIO's and then down here after that entire request 86 00:06:08,070 --> 00:06:13,130 I can count the log out response that data got results like so. 87 00:06:14,360 --> 00:06:19,610 All right before I tell you anything about this syntax right here let's save the file and then run it 88 00:06:19,610 --> 00:06:24,110 again very quickly so I'll put in a search term of cars and hit enter and I see again I get my array 89 00:06:24,110 --> 00:06:27,170 of results right here just as we did previously. 90 00:06:27,170 --> 00:06:33,920 So we have the promise space syntax that uses a then statement that will be called Anytime the request 91 00:06:33,920 --> 00:06:34,880 gets completed. 92 00:06:35,090 --> 00:06:38,640 Alternatively we can use this async await syntax. 93 00:06:38,720 --> 00:06:44,540 In my opinion a sink a weight is far easier to understand and to write out in code than making use of 94 00:06:44,540 --> 00:06:45,720 the promise. 95 00:06:45,860 --> 00:06:47,980 When do you want to use the async syntax. 96 00:06:48,080 --> 00:06:53,960 You just put that async keyword in front of the method name you find whatever is returning or whatever 97 00:06:53,960 --> 00:06:55,890 is taking some time to resolve. 98 00:06:56,000 --> 00:06:59,140 In this case it is the network request with X-post get. 99 00:06:59,220 --> 00:07:04,790 And we put the a week key word in front of that and then whatever gets returned from this entire statement 100 00:07:04,790 --> 00:07:05,460 right here. 101 00:07:05,510 --> 00:07:10,490 We will assign to some variable as we usually do and then we can freely work with that variable later 102 00:07:10,490 --> 00:07:10,910 on. 103 00:07:12,370 --> 00:07:16,050 We're going to be using this async 08 syntax many times throughout this course. 104 00:07:16,150 --> 00:07:20,860 So we'll get a lot of practice with it and some practice with some variations that add in some pretty 105 00:07:20,860 --> 00:07:23,110 good error handling with it as well. 106 00:07:23,110 --> 00:07:23,380 All right. 107 00:07:23,380 --> 00:07:25,810 So we now are able to get our list of images here. 108 00:07:25,810 --> 00:07:26,920 Let's take a quick pause. 109 00:07:26,950 --> 00:07:32,020 When we come back the next section we're going to update our app component to have a state property 110 00:07:32,200 --> 00:07:35,310 and make sure that we set our lists of images on that state. 111 00:07:35,490 --> 00:07:37,300 So a quick pause and I'll see you in just a minute.