Made withVue.jsClip

Vue JS 2 Tutorial #32 - HTTP Requests

N

Net Ninja

Creator on the Vue.js channel

Watch on YouTube ↗

124K viewsMay 16, 201711:19 runtime

Learn how to make HTTP requests in Vue.js to handle form data and interact with external APIs. This tutorial introduces `vue-resource`, a powerful plugin for managing web requests, demonstrating how to install and configure it in your Vue application. Follow along to build a…

Chapters

#vuejs#clip#frontend

Making HTTP Requests in Vue.js

To persist data from a front-end application, like a blog submission form, you need to send it to a backend server. This is done using HTTP requests. This tutorial focuses on using the vue-resource plugin, a formerly official library for handling these requests in Vue.js.

Installing and Configuring `vue-resource`

Installation: Install the package via npm and save it as a project dependency.
```
npm install vue-resource --save
```
Configuration: In your main entry file (main.js), you must import vue-resource and tell Vue to use it.
```
// main.js
import VueResource from 'vue-resource';

Vue.use(VueResource);
```

Important
Once configured, vue-resource is available on all Vue component instances via the this.$http property.

Sending a POST Request

To send data, you can use the this.$http.post() method. It takes two primary arguments:

URL: The API endpoint you want to send data to.
Data: The JavaScript object containing the data you want to send.

Tip
For demonstration purposes, this tutorial uses JSON Placeholder, a free fake REST API for testing and prototyping. The endpoint used is https://jsonplaceholder.typicode.com/posts.

Here is an example of a post method in a component:

methods: {
  post: function() {
    this.$http.post('https://jsonplaceholder.typicode.com/posts', {
      title: this.blog.title,
      body: this.blog.content,
      userId: 1
    }).then(function(data) {
      console.log(data);
      this.submitted = true;
    });
  }
}

Handling Responses with Promises

HTTP requests are asynchronous, meaning they take time to complete. vue-resource returns a Promise, which is an object that represents the eventual completion (or failure) of the request.

You can chain the .then() method to this.$http.post().
The function inside .then() will execute only after the server has successfully responded.
This function receives the response from the server as an argument, which typically includes the data that was sent.

Enhancing User Experience

After a user submits a form, it's good practice to provide clear feedback and update the UI.

State Management: Create a data property (e.g., submitted: false) to track the submission status.
Conditional Rendering: Use the v-if directive to show/hide elements.
- Show the form only when submitted is false: v-if="!submitted"
- Show a success message only when submitted is true: v-if="submitted"
Update State: Inside the .then() block of your HTTP request, set this.submitted = true to trigger the UI change.

Note
When using a <button> inside a <form>, use the .prevent event modifier (@click.prevent="post") to stop the browser's default behavior of reloading the page on submission.

Introduction to HTTP Requests in Vue

Hey, what's happening guys? Welcome to your 32nd Vue.js tutorial. In this video, we're going to start making HTTP requests.

Okay then, so far we have this form right here which allows us to add in a new blog post. And so far it's working well; if we add content, then it appears down below in this preview section, which is cool, right? But eventually, we want to take this data and do something with it, like store it in a database or something. Now to do that, we're going to have to start making HTTP requests—get requests, post requests, that kind of thing.

So there's a few different ways we can do this in Vue.js. We could use jQuery if you wanted to, or the Fetch API. I'm going to show you a way using this plugin called vue-resource. Now, in the early days of Vue.js, this was kind of like the official way to make and handle these requests. So I'm going to show you how to install this now and how to make and handle these HTTP requests with vue-resource.

So if we scroll down a little bit, we can see to install it, we need to do this thing right here: npm install vue-resource. So I'm just going to copy this and open up my terminal. Make sure you're in the correct directory—I'm in Vue.js playlist—and then just paste this thing in. And at the end of it, oops... npm install vue-hyphen-resource and at the end just do --save. That's going to save it to our dependencies. Okay cool. So now that's installed, let's just check our package.json file to make sure it's in our dependencies. And we can see it right there. Cool.

Configuring vue-resource

Okay, so now how do we use this plugin? Well, first of all, we need to go to our main.js file and import it. This is the file that gets kicked off when we first start our application. So we need to import it here and tell Vue.js we want to use this plugin. So to do that, I'm going to say import VueResource from 'vue-hyphen-resource'. Okay, and this is going to be stored in the node modules, so Vue.js is going to be clever enough to work out where to get that from.

Okay, so now we've imported it. Now we need to tell Vue.js we want to use this in our application, and we can do that by saying Vue.use(VueResource), which is this thing right here. Okay, so we're now using this plugin in our application and we can go ahead and start using HTTP requests.

Creating the Post Method

Now, how's this going to work? If we take a look at our form, we've got all of these different fields, right? When they've filled it in, we want some kind of button for them to post it then to a database. So let's add that button first.

So if we go into our add-blog component, we want to come to the end of the form, which is right here, and just inside that we want to add a button. So we'll say <button> and we want to attach a click event to this. So to do that, we'll say v-on:click and it's going to be equal to some kind of function, right? And we'll call this, I don't know, post. So post right there. And the button will say "Add Blog".

Now, when we click a button in a form like this, we want to prevent the default behavior, okay? We don't want it to go off the page anywhere. So we're going to tack on now an event modifier, prevent, and that's going to prevent that behavior. All right, so now we've created this button. What we need to do is create this method down here, which is actually going to grab our data, it's going to take it all and do something with it, post it, right?

Making a POST Request

So let's go down to the object down here and inside our methods we'll have a post method, which is a function like so. So this is where we're going to start using the HTTP capabilities of vue-resource.

So first of all, what we're going to do is say this, to refer to the component, and then now we've installed vue-resource, we can say $http, right? We can't use that beforehand, but we can now we've installed that plugin. Then we want to say what type of request we're making. It's going to be a POST request because what we're doing is grabbing the data that the user's input to the fields and we're going to grab all that and post it to somewhere, right?

So, parenthesis, and in here we need to say where we're posting to. Now, if we had some kind of database set up, we could post to that database, and we're going to do that in future tutorials. We're going to set this up with Firebase and post to our own NoSQL database. But for now, I just want to use a service online called JSON Placeholder, and this basically gives us a very simple REST API to interact with. So we can make POST requests or GET requests to these different resources right here. And what we're going to do is make a request to the posts, right? So you can see right here the root is this URL and then it's just /posts if we want to make a POST request.

You see, posts. So we're going to do that now. So what I'm going to do is just copy and paste the URL we need from my GitHub repo. I'll leave the link to that down below. And I'm just going to paste it in here. So we're making a POST request to this. And again, this isn't going to do much. We're not going to see where this data goes. We're just kind of getting used to using this HTTP method right here. Okay, so later on when we do come to use Firebase, we're going to change this URL right here to be the URL of our Firebase.

Structuring the Data Payload and Handling the Response

Okay, so the second parameter we need to pass through is an object, and this object is going to be what we want to send. Okay? Now if we take a look at this REST API kind of thing here, JSON Placeholder, you can see we need certain different items in the posts. So we'll click on posts and you can see we have a user ID, a title, and a body, right? So let us now go and add those things. So I'll come down here and what I'm going to do is specify those different properties in this object.

So the title we want to send is going to be this.blog.title, because remember this thing right here, when we enter something into that form, this is populated. So now we can grab that once they've entered something and they click that button, and we can grab it and store it here in this object that we're sending. Okay, so the next thing we need to add is the body, and that's going to be this.blog.content, that was the text area. Okay, and then we'll also pass through a user ID. Um, and because we don't really have a user ID, we just have these names right here, where are they, these things, then what I'm going to do is just leave this for now, I'm just going to put in 1. Okay, and when we hook this up with Firebase, we'll add this in properly.

Okay cool, so we're making that post request and that's going to post data to that fake JSON server. Okay, so what we can do then is tack on the then method because this is a promise. It returns to us a promise right here which means, okay, this is going to take some time to complete this action. When it's complete, then I'll fire whatever function you pass through to the then method. All right? So we're going to pass this function through and we receive the data back. And the data that we get back is typically going to be the data that we send in a post request. So let's just log this to the console and see what happens. We'll say console.log(data). So let's save that and check it out in a browser.

Testing the POST Request in the Browser

And if we go to our form, I'm going to open up the console just so we can see what's returned to us. And let's enter some details. Okay, add blog now. Now when we click that, we get a response right here. We can see the URL it went to. Status is 201. It's OK, everything's fine; it's been created. And we can see the body text we get back is this thing right here which we entered. Okay, and if we open the body, we can see the different properties right there. So everything is absolutely fine. This has all worked. So we've successfully now made a POST request.

Improving UI with Dynamic Feedback

Now just one little thing I want to do to finish off this tutorial before we move on is to add some kind of dynamic behavior into this so that when we add a blog, then we get a message saying, "Thanks for adding your blog," and also this stuff hides, right? So let's do that. We're going to use v-if to do it.

So the first thing I want to do is add in a new property right here called submitted. And what this is going to do is keep track of whether the form has been submitted yet. So to begin with, it's going to be false, right? Because it's not been submitted yet. But when we click on the button to submit, it's then going to be true. So we have submitted it. So we can use this now to use a couple of v-if statements up here. For example, if we successfully post, then we want to show some kind of success message, right? So we'll add in below the form div. And this div is going to have the directive v-if and that's going to be equal to submitted. So when submitted is true, then what we want to do is show this message. So inside here we can output some kind of simple message. I'll do an <h3> and I'll say something like, "Thanks for adding your post."

Okay, now we need, when we click this button down here, we need this submitted to turn to true so that then that shows. So underneath here we'll say this.submitted = true. Okay, makes sense because when this equals true, then we'll get that kind of feedback message. So let's save this, check it out again, and add blog. Now we get this message right here, which is cool.

One more thing, I want to hide this form when we've submitted as well. So we can add on a v-if statement for that. So it's going to be the opposite of this thing right here. We only want to show the form when submitted is false. So we can do the same thing v-if="submitted" but just add in this thing so it kind of negates it. Okay, so we'll add that on the form. We'll say v-if is equal to then negation operator submitted. Save that and let's check it out. Refresh. And now if we add in a load of stuff... Add Blog. Now it hides the form and we get this message right here. So that's a little bit better.

Okay, cool. So there we go. That is how we use vue-resource to make HTTP requests. This isn't the end of using vue-resource. We're also going to make GET requests in the next tutorial, and later on down the line, we're going to hook everything up to Firebase.