How to Use Fetch get in JavaScript

by

The fetch() method in JavaScript is used to get the data from the server displayed on the screen in the form of web pages. APIs make the request, and data is returned in JSON or XML format. Finally, the fetch() method returns a promise.

Syntax

fetch(url, {options})
  .then(data => {
     // Do some stuff here
  })
  .catch(err => {
    // Catch and display errors
  })

Arguments

The fetch() method contains two parameters, of which one is an optional parameter.

URL: This is the place where we need to write the URL of the JSON file for which we need to make a request. Basically, this is the actual path of the resource that we want to fetch.

Optional: It’s an optional parameter, an array of properties.

Return value

The fetch get() method returns a promise whether the request is resolved or not. It can return data in either JSON format or XML format.

How to Use fetch get in JavaScript

To use fetch get in JavaScript, use the fetch() function and pass the endpoint URL that returns the data; use the .json() method to convert the JSON object to JavaScript Object.

The fetch API returns a promise. Because of this, you need to nest a then() method to handle the resolution. To demonstrate fetch get request, we will use the free API: https://tenders.guru/api/es/tenders

import fetch from "node-fetch"

fetch('https://tenders.guru/api/es/tenders')
   .then(data => {
     return data.json();
   })
   .then(post => {
     console.log(post.data[0].title);
   });

Output

Servicio de producción de células mesenquimales troncales adultas autólogas y alogénicas de 
medula ósea expandidas, vinculado al proyecto de investigación PIC18/00001

The data returned from the API is not usually in a useable form. So you’ll need to convert the data to a form that your JavaScript can operate with. Thankfully, you can use the .json() method to do just that:

As you can see in the above code, you can nest a subsequent then() method to parse the data.

Fetch API GET Request

Title Completed?
delectus aut autem false
quis ut nam facilis et officia qui false
fugiat veniam minus false
et porro tempora true
laboriosam mollitia et enim quasi adipisci quia provident illum false
qui ullam ratione quibusdam voluptatem quia omnis false
illo expedita consequatur quia in false
quo adipisci enim quam ut ab true
molestiae perspiciatis ipsa false
illo est ratione doloremque quia maiores aut true

Explanation

In this example, we have used fetch() API. As we discussed, the fetch() method takes a mandatory parameter which is a resource URL that needs to be fetched.

So we have given a link here that has only one JSON object. After that, we are creating a response i.e a JSON response. Finally, we are printing the fetched object using the console.log() function.

Conclusion

The fetch() is a tool that lets you make simple AJAX (Asynchronous JavaScript and XML) calls with JavaScript.

That’s it for this tutorial.

See also

How to Use Export Default in JavaScript

How to Write a File in JavaScript

How to Read a JSON file in JavaScript

Leave a Comment