#100DaysOfWeb in Python Transcripts
Chapter: Days 93-96: Vue.js - JavaScript user interfaces
Lecture: Searching movies via the API and axios
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
With our app working well with its local data that we don't have to worry about getting asynchronously and all the details about
0:07
web services, it's time to focus on exactly that the web service. So here we are at the service, and notice we've got all these API endpoints.
0:16
We've got movie_service.talkpython.fm/api/search /run, and of course this is the search term. So there's, like, Blade Runner and all that.
0:26
And we also notice over here we have all genres oops, not all genres, but top 10 movies or movie by genre. And if you look at the data, they all return
0:34
the exact same structure. So that's going to help us a lot. Like, this one, all these return the same basic structure over here.
0:42
So we don't have to change how we'd write that code. We're just going to go and sort of write one general
0:47
get me some movie data, and we're going to pass it different URLs. So let's do that. And how are we going to call this service?
0:54
Well, if we look at our code over here Vue itself I don't believe and to the extent I know comes with any way built in to work with HTTP services.
1:02
And the suggestion is to get some other HTTP library, like even with Python, yes you could use the built-in stuff but most people just use Requests
1:12
or Aiohttp Client, things like that. Same here, so what we're going to do is we're going to use this thing called Axios a really nice system here.
1:19
We can just install it super-easy by listing that right there, put that in there. And here's an example of how it works.
1:27
You go and create an instance of it. You can get a URL. Then you process the success, the error and then whatever else you want to do.
1:34
And that's pretty much it. So we can do that, right? Let's go over here, we need to add one tiny change, like so. We're going to install that.
1:43
And then we shouldn't have to touch our HTML anymore. It should be totally done. It's just going to be the different data
1:48
that we run and work with here. So what we want to do is let's go ahead and write a function called load movies.
1:56
And it's going to take a URL, and we'll do it like this, of course. So we're going to call load movies from various things.
2:02
Like, for example, up here, instead of saying we would have searched for this, whoops instead of saying we should've searched for this
2:08
we'll say this.load_movies. And then we just need to give it a URL. So let's go up here and say, put a base_url up here.
2:16
And we can just grab that from our movie service. And these are all look like, something like this to start. Okay, so then if we want to go and load
2:26
the movies, we can just say base_url plus we put search and then the search term. So we've got the search and then the text.
2:36
Now, we probably should URL encode that but we're just going to roll with this now, okay? So this is going to go and call that.
2:41
And what we have to do to get going is put that little bit of code here, and, you know let's just grab what they got as a quick little start.
2:48
We don't need the then, we'll just do that. So what we've got to put here is our URL. And then we're going to get some kind of response.
2:57
Let's just say, success. And it turns out what we're going to have on here is a data item that's coming in.
3:04
And then down here we'll say something like, oh no, error, like so. All right, well, if we go and search for something it should go and try to call it.
3:12
Let's see if we got this working. Get our little console up so we can see what's happening. Clean things up. And let's go search for runner.
3:21
Oh, probably got to refresh it, runner. Look at that, success. We caught an object back. And what we got back, let's go look
3:29
at our fake data, is actually this whole thing right here. And what we really want are the hits. So we want to get to the data and we want to say hits.
3:37
Those are the movies, that's how it works. All right, so we run it again and we say blade we get a whole bunch of stuff back. Cool, right?
3:45
So those are the movies coming back. All we got to do now is change that content. Well because of the binding that we have
3:53
happening already with Vue.js, this should be super-easy. We're binding to, you know, this.movies. So we should be able to say something entirely
4:02
simple like, instead of success we'll say this.movies equals that data. Now, welcome to JavaScript. This almost works. This is so close to working.
4:13
But let me just do something real quick. This is this. If we refresh that and I say test, this is window. Ah, it's one of these this pointer means
4:25
something different in the callback than it does in the original calls. So we have to say let that equals this and then that.
4:32
So we capture that, it's a closure. Thank you, JavaScript. Refresh this now, watch this. I go over here and search for blade.
4:40
Look at that, how awesome is this? Do you see what happened? All the movies changed. Basically it's working, right?
4:48
Let's search for runner. I got that. Let's search for cap it all, let's search for Santa, whatever. You can see it's going to the service.
4:58
It's no longer using the fake data. And how incredibly easy was it? Well, we had to put, maybe get rid of the comment
5:05
out of there. That's it, we wrote that code. We also have to have error handling which we're, you know, not doing too much with.
5:10
We're not, like, really showing the user, like oh, we couldn't get to the service or something but that's okay. This is it.
5:16
We passed the URL, we've captured the data and then we just set the movies on the object back to this and we're good.