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));
