JavaScript Fetch API

To get information from a server, utilize JavaScript's get() method. Any sort of API that returns data in JSON or XML can be requested. The URL to request is the only parameter needed for the Fetch () method, which also returns a promise.

Send a Request using Fetch

The javascript fetch api sends a request for the url. If the request sends, then it displays the response. If the request does not send, then it shows an error.

Syntax

The following syntax shows the fetch api method using JavaScript for sending the url request.

fetch('url')
.then(response  =>  { //handle request});
.then(error  = >  { //handle error});

We pass a configuration object and the endpoint's URL to the fetch method.
We submitted the given information in our HTML or Javascript components shown as an output.

Reading response using Fetch API

The javascript fetch api sends a request for the url and gets a response from the API. If the request sends successfully, then API gets a response and shows data.

Syntax

The following syntax shows the fetch api method using JavaScript for the reading response of the url.

fetch('url')
.then(response  =>  response.json())
.then(data  = >  console.log(data));

Parameters:

This technique accepts two arguments, but one parameter is essential for the method.

URL: This is the URL that the request should be sent to.
Options: The set of properties is an array. It is a choice-based parameter.

Return Value:

Whether it is resolved or not, it returns a promise.
The returned information may be in XML or JSON formats.
It could be a collection of objects or just one object.

Examples

The following examples show the fetch api method in javascript.

Example 1

The example shows the basic fetch api method using a javascript function.

<!DOCTYPE html>
<html>
<head>
<title> Javascript Fetch API </title>
</head>
<body>
<p> Javascript Fetch API  </p>
<script>
//get the URL of the data
let url = 'https://jsonplaceholder.typicode.com/users/1';
console.log(url);
//Fetch API method for getting requests
let fetch_Res = fetch(
url);
// fetch variable is the promise to resolve response using.then() method
// display data as an output
fetch_Res.then(resp =>
resp.json()).then(datas => {
console.log(datas)
})
</script>
</body>
</html>

Output

The given image shows url file value in the console as an output.

Example 2

The example shows the basic fetch api method using the javascript function. The url files data displays in the console using the javascript function. We can get json data on the web page.

<!DOCTYPE html>
<html>
<head>
<title> Javascript Fetch API </title>
</head>
<body>
<p> Javascript Fetch API  </p>
<script>
//get the URL of the data
let url = 'https://jsonplaceholder.typicode.com/users/2';
console.log(url);
//Fetch API method for getting requests
// fetch variable is the promise to resolve response using.then() method
fetch(url)
.then(response => response.json())  // convert to json data
.then(json => console.log(json))   // display data as an output
</script>
</body>
</body>
</html>

Output

The given image shows url file information in the console as an output.

Example 3

The example shows the basic fetch api method for sending requests using a javascript function. The fetch method sends the wrong url then javascript sends an error message on the console.

<!DOCTYPE html>
<html>
<head>
<title> Javascript Fetch API </title>
</head>
<body>
<p> Javascript Fetch API  </p>
<script>
//get the URL of the data
let url = 'https://jsonpl1aceholder.typicode.com/users/12';
console.log(url);
//Fetch API method for getting requests
// fetch variable is the promise to resolve response using.then() method
fetch(url).then(response => response.json())  // convert to json data
.then(json => console.log(json))   // display data as an output
.catch(error => console.log('URL Request Failed', error)); // Display Catch errors
</script>
</body>
</body>
</html>

Output

The given image shows error information in the console as an output.

Example 4

The example shows the basic fetch api method for URL requests using a javascript function. The fetch method sends url and sends status data to the console. We can get json data in the console of the web page.

<!DOCTYPE html>
<html>
<head>
<title> Javascript Fetch API </title>
</head>
<body>
<p> Javascript Fetch API  </p>
<script>
//get the URL of the data
let url = 'https://jsonplaceholder.typicode.com/users/1';
async function fetchData() {
    let response_data = await fetch(url);
    // 200: display the response status of the URL
    console.log(response_data.status); 
    // ok
    console.log(response_data.statusText); 
    if (response_data.status === 200) {
        let data = await response_data.text();
        //display data of the url as output
        console.log(data); // 200
        }
}
fetchData();
</script>
</body>
</html>

Output

The given image shows url file information in the console as an output.

Example 5

The example shows the basic fetch api method for URL requests using a javascript function. The fetch method sends the wrong url and status data to the console.

<!DOCTYPE html>
<html>
<head>
<title> Javascript Fetch API </title>
</head>
<body>
<p> Javascript Fetch API  </p>
<script>
//get the URL of the data
let url = 'https://jsonplaceholder.typicode.com/users1/1';
async function fetchData() {
    let response_data = await fetch(url);
    // 200: display the response status of the URL
    console.log(response_data.status); 
    if (response_data.status == 404) {
        let data = await response_data.text();
         console.log("URL does not found"); 
        //display data of the url as output
        console.log(data); // 200
        }
}
fetchData();
</script>
</body>
</html>

Output

The given image shows the error status in the console as an output.

Example 6

The example shows the basic fetch api method for URL requests using a javascript function. We are building a straightforward form for the HTML portion that will ask the user for the title and body. Keep in mind that the ID was produced automatically. As for the script, we run the get method after inserting an event listener function.

<html>
<head>
</head>
<body>
   <form id ="form_data" method="post">
       <input type = "text", id = "title" placeholder = "Write technology"/>
       <br><br>
       <input type = "text", id = "user" placeholder = "Write Users"/>
       <br><br>
       <input type="submit" value="Insert Value">
    </form> 
    <div>
    <h3>The data is successfully inserted</h3>
    <h4 id="titles"></h4>
    <h5 id="bodies"></h5>
    </div>
</body>
<script>
//get the variable of the form id for the function
var form_data=document.getElementById('form_data')
//create a function to use fetch api
form_data.addEventListener('submit', function(e){
 e.preventDefault()
//use the id of the input tag of the form
 var title = document.getElementById('title').value
 var user = document.getElementById('user').value
//fetch method with url request
let url ='https://jsonplaceholder.typicode.com/posts';
 fetch(url, {
  method: 'POST',
  //call user input value
  body: JSON.stringify({
    title: title,
    body: user,
  }),
  headers: {
    'Content-type': 'application/json; charset=UTF-8',
  }
  })
  .then(function(response){ 
  return response.json()})
  .then(function(datas)
  {
  //display data in console
  console.log(datas)
  //shows user input values
  titles = document.getElementById("titles")
  bodies = document.getElementById("bodies")
  titles.innerHTML = datas.title
  bodies.innerHTML = datas.body  
}).catch(error => console.error('SEE Error:', error)); 
});
</script>
</html>

Output

The image shows user information in the console and web page as an output.

Example 7

The given an example shows a basic image using the URL request of the javascript function. The fetch method sends url of the image, converts it into a blob, and displays as on the web page.

<!DOCTYPE html>
<html>
<head>
<title> Javascript Fetch API </title>
</head>
<body>
<p> Javascript Fetch API  </p>
<img src = "" id = "flower_data" width = 350 height = 350/>
<script>
//get the URL of the image request
let url = 'https://images.unsplash.com/photo-1672365328426-c2c09b68212e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80';
async function fetchData() {
//use fetch API method
    let response_data = await fetch(url);
//converts image into blob method
    const blob_data = await response_data.blob();
//display image in html tag
       document.getElementById('flower_data').src = URL.createObjectURL(blob_data);
}
fetchData();
</script>
</body>
</html>

Output

The given image shows the required image on the web page as an output.

Conclusion

The fetch API method in javascript is used to respond url and shows given data. The data shows in json format and also in the image. It is a simple and essential method for developers to handle URL requests and their data.

Next TopicJavascript history.pushState() Method

← prev next →