JavaScript Get Data From Fetch() API Example

JavaScript Get Data From Fetch() API Example

In this tutorial, you’ll learn about the JavaScript Fetch API and how to use it to make asynchronous HTTP or network requests similar to XMLHttpRequest (XHR) requests.

And as well as, you will learn how to use the JavaScript fetch API to get json, text, html Data from apis.

How to Get/Fetch Data from Api in JavaScript

The Fetch API allows you to asynchronously request for a resource. And use the fetch() method to return a promise that resolves into a Response object. To get the actual data, you call one of the methods of the Response object e.g., text() or json() . These methods resolve into the actual data.

Making Request with Fetch

The javascript fetch() the function requires only one parameter, which is the URL of the resource that you want to fetch any data:

let response = fetch(url);

Now, you will learn how to use fetch() method with Promise. See the following example of use the then() and catch() methods to handle it:

fetch(url)
    .then(response => {
        // handle the response
    })
    .catch(error => {
        // handle the error
    });

In the above-given syntax, you have seen how to use Fetch API and with promises.

Note that, The response you will get is not JSON but an object with a series of methods you can use depending on what you want to do with the information, these methods include:

  • json() – Lastly we have the method to that resolves the promise with JSON.
  • text() – In this case it resolves with a string.
  • blob() – This is one resolves with a Blob.
  • arrayBuffer() – In here we return a promise that resolves with an ArrayBuffer.
  • clone() – As the method implies this method creates a clone of the response.
  • redirect() – This method creates a new response but with a different URL.
  • formData() – Also returns a promise but one that resolves with FormData object.

Get text from api fetch

If the contents you want to fetch from apis using fetch() are in the raw text format. So, you can use the text() method.

Note that, The text() method returns a Promise that resolves with the complete contents of the fetched resource:

fetch('/readme.txt')
    .then(response => response.text())
    .then(data => console.log(data));

Fetch json data from api in javascript

If the contents you want to fetch from apis using fetch() are in the JSON format. So, you can use the json() method.

Note that, The json() method returns a Promise that resolves with the complete contents of the fetched resource:

fetch(URL)
.then(res => res.json())
.then(json => console.log(json));

Use Request Method and Headers with Fetch

You can use the request headers by assigning a Headers object to the request headers field. See the following syntax for how to ask for JSON content only with the 'Accept' header:

const headers = new Headers();
headers.append('Accept', 'application/json');
const request = new Request(URL, { method: 'GET', cache: 'reload', headers: headers });

You can create a new request from an old one to tweak it for a different use case. For example, you can create a POST request from a GET request to the same resource. Here’s an example:

const postReq = new Request(request, { method: 'POST' });

And you can access the response headers, but keep in mind that they’re read-only values.

fetch(request).then(response => console.log(response.headers));

Recommended JavaScript Tutorials

AuthorAdmin

Greetings, I'm Devendra Dode, a full-stack developer, entrepreneur, and the proud owner of Tutsmake.com. My passion lies in crafting informative tutorials and offering valuable tips to assist fellow developers on their coding journey. Within my content, I cover a spectrum of technologies, including PHP, Python, JavaScript, jQuery, Laravel, Livewire, CodeIgniter, Node.js, Express.js, Vue.js, Angular.js, React.js, MySQL, MongoDB, REST APIs, Windows, XAMPP, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL, and Bootstrap. Whether you're starting out or looking for advanced examples, I provide step-by-step guides and practical demonstrations to make your learning experience seamless. Let's explore the diverse realms of coding together.

Leave a Reply

Your email address will not be published. Required fields are marked *