Vue HTTP requests

up:: Vue


Using the built-in fetch() mehod:

fetch('', {
	method: 'POST',
	headers: {
	body: JSON.stringify({
		other: this.other,


In the methods:

Using then:

	if (response.ok) {
		return response.json();
}).then(function(data) {console.log(data)}); 

(using await is probably easier)

  • You might need to transform the incoming data. Eg. from an object of objects to an array of objects.
  • It is also easier to use JavaScript Arrow Functions because inside them, this refers to the same as outside.
  • Using the Vue Instance Lifecycle of mounted(), you can load data on component mounting.

Loading spinner:

  • Add a data isLoading property
  • Update it throughout the methods. At the start: true. At the end, false.
  • Show loading message conditionally with v-if