Vue HTTP Request
The HTTP request is a part of the communication between a client and a server.
The client sends an HTTP request to the server, which handles the request and returns an HTTP response.
HTTP
Hyper Text Transfer Protocol is referred to as HTTP.
Our browser makes HTTP requests all the time in the background when we browse the Internet. When we access an Internet page, our browser (the client) sends several HTTP requests to make the server send us the page we want with all the relevant files and data as HTTP responses.
POST, GET, PUT, PATCH, and DELETE requests are the most popular types of HTTP requests. Visit our HTTP Request Methods page to find out more about the many types of HTTP requests.
Visit our What is HTTP page to find out more about what it is.
The 'fetch' Method
The JavaScript fetch() method can be used in Vue to retrieve data from a server.
Since we won’t be specifying the HTTP request method while using the fetch()method in this tutorial, the background request method GET is utilized by default.
In order for the fetch() method to know where to obtain the data, it requires a URL address as an input.
This is a basic example of sending an HTTP GET request and receiving data as an HTTP response using the fetch() method. In this instance, the text contained in the local file file.txt is the requested data:
Example
App.vue:
<template>
<div>
<button @click="fetchData">Fetch Data</button>
<p v-if="data">{{ data }}</p>
</div>
</template>
<script>
export default {
data() {
return {
data: null,
};
},
methods: {
fetchData() {
const response = fetch("file.txt");
this.data = response;
}
}
};
</script>
The following example merely returns “[object Promise]”, which is not what we want.
Because fetch() is a promised-based method that returns a promise object, we obtain this outcome. Consequently, the initial result that the fetch() method returns is only an object, indicating that the HTTP request has been sent. The “pending” status is this.
The promise is fulfilled when the fetch() method really obtains the desired data.
We must use the await operator in front of the fetch() method in order to wait for the response to be fulfilled with the desired data:
const response = await fetch("file.txt");
When a method uses the await operator, the async operator must be defined with the method:
async fetchData() {
const response = await fetch("file.txt");
this.data = response;
}
The async operator informs the browser that the method is asynchronous, meaning that it will wait for an input and that the user can carry on with other activities in the interim.
This indicates that we are getting closer to receiving the actual text contained in the file.txt file because we are now receiving a “Response” rather than merely a “Promise”:
Example
App.vue:
<template>
<div>
<button @click="fetchData">Fetch Data</button>
<p v-if="data">{{ data }}</p>
</div>
</template>
<script>
export default {
data() {
return {
data: null,
};
},
methods: {
async fetchData() {
const response = await fetch("file.txt");
this.data = response;
}
}
};
</script>
We must utilize the text() function on the response in order to obtain the text contained in the file.txt file. We must utilize the await operator in front of the text() method because it is a promise-based method.
At last! Now that we have everything we need, we can use the fetch() method to extract the text from the file.txt file:
Example
App.vue:
<template>
<div>
<button @click="fetchData">Fetch Data</button>
<p v-if="data">{{ data }}</p>
</div>
</template>
<script>
export default {
data() {
return {
data: null,
};
},
methods: {
async fetchData() {
const response = await fetch("file.txt");
this.data = await response.text();
}
}
};
</script>
Fetch Data from a JSON File
The text from a .txt file was retrieved in the preceding example. However, there are other ways to save data. In this section, we’ll look at how to get data from a .json file.
Since JSON is a commonly used file format and is extensively supported by programming languages, it is simple to deal with. For example, we may define what data to extract from a .json file because the data is saved as text, making it easy for people to understand.
The only thing we need to do differently from the example above in order to read data from a .json file is to get the file and utilize the json() method on the response rather than the text() method.
A JavaScript object is returned by the json() function, which reads the result from the HTTP request.
To make the JSON formatted content simpler to read, we have chosen to display it using the <pre> element, which maintains line breaks and spaces.
Example
App.vue:
<template>
<div>
<button @click="fetchData">Fetch Data</button>
<pre v-if="data">{{ data }}</pre>
</div>
</template>
<script>
export default {
data() {
return {
data: null,
};
},
methods: {
async fetchData() {
const response = await fetch("bigLandMammals.json");
this.data = await response.json();
}
}
};
</script>
Since a JavaScript object is the output of the json() method, we can alter the example above to display a random animal from the bigLandMammals.json file:
Example
App.vue:
<template>
<p>Try clicking the button more than once to see new animals picked randomly.</p>
<button @click="fetchData">Fetch Data</button>
<div v-if="randomMammal">
<h2>{{ randomMammal.name }}</h2>
<p>Max weight: {{ randomMammal.maxWeight }} kg</p>
</div>
</template>
<script>
export default {
data() {
return {
randomMammal: null
};
},
methods: {
async fetchData() {
const response = await fetch("bigLandMammals.json");
const data = await response.json();
const randIndex = Math.floor(Math.random()*data.results.length);
this.randomMammal = data.results[randIndex];
}
}
};
</script>
Data from an API
Application Programming Interface is referred to as API. Here is more information about API.
We may connect to and use a number of fascinating free APIs to obtain stock exchange data, weather data, and other types of information.
When we send an HTTP request to an API, we can receive a response with a variety of data types, although JSON-formatted data is frequently included.
Example
To obtain a random user using the random-data-api.com API, click the button.
App.vue:
<template>
<h1>Example</h1>
<p>Click the button to fetch data with an HTTP request.</p>
<p>Each click generates an object with a random user from <a href="https://random-data-api.com/" target="_blank" rel="noopener">https://random-data-api.com/</a>.</p>
<p>The robot avatars are lovingly delivered by <a href="http://Robohash.org" target="_blank" rel="noopener">RoboHash</a>.</p>
<button @click="fetchData">Fetch data</button>
<pre v-if="data">{{ data }}</pre>
</template>
<script>
export default {
data() {
return {
data: null,
};
},
methods: {
async fetchData() {
const response = await fetch("https://random-data-api.com/api/v2/users");
this.data = await response.json();
}
}
};
</script>
We may slightly alter our prior example to more user-friendlyly incorporate the random user:
Example
When the button is clicked, we display the job title, image, and random user name in a <pre> tag.
App.vue:
<template>
<h1>Example</h1>
<p>Click the button to fetch data with an HTTP request.</p>
<p>Each click generates an object with a random user from <a href="https://random-data-api.com/" target="_blank" rel="noopener">https://random-data-api.com/</a>.</p>
<p>The robot avatars are lovingly delivered by <a href="http://Robohash.org" target="_blank" rel="noopener">RoboHash</a>.</p>
<button @click="fetchData">Fetch data</button>
<div v-if="data" id="dataDiv">
<img :src="data.avatar" alt="avatar">
<pre>{{ data.first_name + " " + data.last_name }}</pre>
<p>"{{ data.employment.title }}"</p>
</div>
</template>
<script>
export default {
data() {
return {
data: null,
};
},
methods: {
async fetchData() {
const response = await fetch("https://random-data-api.com/api/v2/users");
this.data = await response.json();
},
}
};
</script>
<style>
#dataDiv {
width: 240px;
background-color: aquamarine;
border: solid black 1px;
margin-top: 10px;
padding: 10px;
}
#dataDiv > img {
width: 100%;
}
pre {
font-size: larger;
font-weight: bold;
}
</style>
HTTP Request in Vue with The 'axios' Library
We can now send HTTP queries thanks to the ‘axios’ JavaScript library.
Installing the ‘axios’ library via the console in your project folder is the first step towards creating and running the example on your own computer. It looks like this:
Using Vue’s ‘axios’ module, we can retrieve a random user in this way:
Example
To perform the HTTP request using the ‘axios’ library instead of the previous example, only minor modifications are necessary.
App.vue:
<template>
<h1>Example</h1>
<p>Click the button to fetch data with an HTTP request.</p>
<p>Each click generates an object with a random user from <a href="https://random-data-api.com/" target="_blank" rel="noopener">https://random-data-api.com/</a>.</p>
<p>The robot avatars are lovingly delivered by <a href="http://Robohash.org" target="_blank" rel="noopener">RoboHash</a>.</p>
<button @click="fetchData">Fetch data</button>
<div v-if="data" id="dataDiv">
<img :src="data.data.avatar" alt="avatar">
<pre>{{ data.data.first_name + " " + data.data.last_name }}</pre>
<p>"{{ data.data.employment.title }}"</p>
</div>
</template>
<script>
import axios from 'axios'
export default {
data() {
return {
data: null,
};
},
methods: {
async fetchData() {
this.data = await axios.get("https://random-data-api.com/api/v2/users");
}
}
};
</script>
<style>
#dataDiv {
width: 240px;
background-color: aquamarine;
border: solid black 1px;
margin-top: 10px;
padding: 10px;
}
#dataDiv > img {
width: 100%;
}
pre {
font-size: larger;
font-weight: bold;
}
</style>
