Open In App

Fetch API

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

For long XMLHttpRequest is being used by web developer’s trusted “amigo”. XMLHttpRequest has enabled ajax and a whole new kind of interactive exposure. 
However, it is being slowly succeeded by the Fetch API. These both deliver the same work i.e. fetching data asynchronously from a different network, but the Fetch API is Promise based. This provides a more cleaner and more concise syntax.
The Fetch API provides the fetch() method defined on a window object. This is used to perform requests. This method returns a Promise which can be further used to retrieve response of the request. 
Basic Syntax: 
 

 fetch(url) //call the fetch function passing the url of the API as a parameter
.then(function(){
  //code for handling data from API
});
.catch(function(){
  //code when the server returns any error
});

NOTE: By default, fetch() will not send or receive any cookies from the server, resulting in unauthenticated requests.
Below are list of methods which can be used when we get a response on what we want to do with the information: 
 

  1. clone(): for creating a clone of response.
  2. redirect(): for creating strong response with different url.
  3. arrayBuffer(): we return a Promise that resolves with an ArrayBuffer.
  4. formData(): also returns a Promise that resolves with a FormDataObject.
  5. blob(): same as above only that resolves with a blob.
  6. text(): this resolves with a string.
  7. json(): it resolves promise with JSON.

Request: 
A Request object represents the request part of a fetch call. By passing fetch a Request you can make advanced and customized requests: 
 

  1. method: GET, POST, PUT
  2. url: URL of the request
  3. headers: Headers object
  4. referrer: referrer of the request
  5. mode: cors, no-cors, same-origin
  6. credentials: should cookies go with the request? omit, same-origin
  7. cache: cache mode (default, reload, no-cache)

LOADING JSON 
We cannot block the user interface waiting until the request completes. That is why fetch() method returns a Promise. A promise is actually an object which represents a future result. The then() method is used to wait for the response from the server-side and log it to the console.
Below code snippet explains the above logic: 
 

javascript




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


Async…await 
This provides a more concise way to process Promises. Its functionality is that we can mark a function as async, then wait for the promise to finish with the await, and access the result as a normal object.
Simple example demonstrating how async…await can be used: 
 

javascript




async function demo(subject){
   const Res= fetch(URL);
   const response= await Res;
   const json= await response.json();
   console.log(json);
}
demo('javascript');


HANDLING ERRORS: 
What if we ask the server for a non-existing resource that requires permissions/authorization? With fetch(), we can handle application-level errors like 404 responses.
Although Fetch API is superseding XMLHttpRequest still a beginner needs to learn XMLHttpRequest to make more effective use of Fetch API.
Reference: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
 



Last Updated : 27 Oct, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads