Vue Request Js

Posted on  by admin

Making POST request

Modified4 years, 4 months ago. Trying to send an http get request using Vue js. Can't see any problems with the logic, not too experienced using vuejs though. Keep getting these two errors:.

[Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'get' of undefined". TypeError: Cannot read property 'get' of undefined. Updated the code using vue resource, the errors are gone but it won't console log any data, what could be wrong? EDIT:This code works, don't really understand the .then function though and why the request won't work with the callback function but the .then function does. 11 gold badge44 silver badges1919 bronze badges.

1919 bronze badges.

I tried a sample on my machine .you are using $http in wrong way. refer the docs.Since $http resolves a promise its callback can be handled inside a then function. This worked for me:. Manav MandalManav Mandal.

In this tutorial, we are going to learn about how to make get requests and post requests in vuejs using vue resource package. Let’s create a new Vue project by using the vue cli.

Setting root url

Now change your current working directory by running the below command in your terminal. Now we are going to install the vue-resource package by running the following command.

Once you successfully installed the vue-resource package, now we need to configure this package by adding below-highlighted lines to the main.js file.

By adding this configuration VueResource provides us a global $http object, which helps us to make http requests anywhere from our Vue app.

  1. For learning purposes, we are using json placeholder API for making http requests. GET request method is used to fetch the data from the backend API, let’s see an example.

In the above code, we are making a get request inside created() lifecycle hook once the data comes back from the API we are updating the post property with the response. The POST request method is used to send the data to the backend API, let’s see an example. In the above code, this.$http.post() method takes two arguments, the first argument is the api url and second argument is the data we need to send to the api.

  1. In vue resource we can also set global root url instead of adding a full url to every request. Open your main.js file and add the below code.
  1. Now we need to just add paths inside our GET or POST request, which are appended to this root url. Learn the basics of making GET requests in Vue.js to retrieve information from the backend server.
  1. The easiest way to make HTTP requests in Vue.js is by using axios, a promise based HTTP client for the browser and node.js. Let’s install it using npm:. Hi, I'm Renat 👋. Learn how to make POST requests in Vue.js. In front-end development, you’ll often make POST requests when submitting a form.

  2. I’ve already described how to make a GET request in Vue.js. We’ll be using axios, a promise based HTTP client for the browser and node.js, to make this API request. You should replace '/user' with your own URL. Alternatively, you can perform a POST request in axios by passing config to your request.

  3. Hi, I'm Renat 👋. In the example above, we’re using JavaScript Promises for the eventual completion of the request. To save your development time, you can move your app’s base URL to a separate config file.

  4. And make it change automatically for development and production sites. If you find this post useful, please let me know in the comments below.

  5. Cheers,Renat Galyamov. Want to share this with your friends?👉renatello.com/vue-js-post-request.

  6. PS: Make sure you check other Vue.js tutorials.

TIP

If you discovered that there was a film called Undefined, then you made a mistake somewhere 😃