The Fetch API
A modern replacement for XMLHttpRequest
It is said that “Necessity is the mother of all inventions” and that’s what fueled the development of Fetch API. But before digging deeper into the Fetch API let’s dive into the history behind it. I know I know what’s going on in your mind but I will keep it short.
AJAX
Before AJAX
(Asynchronous JavaScript and XML) concept was introduced, to update the portion of a page, browsers at that time used to make a request for a full web page to the server, after the request was received by the server, it used to create and return a page to the browser as a response. It means that even for a small change the page was loaded entirely. That was bad right? very very bad.
After AJAX
came into the world of internet, it changed the traditional way of updating the page. With AJAX
, Web applications were able to send and retrieve data from a server asynchronously (in the background) without interfering with the display and behaviour of the existing page.
XMLHttpRequest
In 2006 the World Wide Web Consortium published a Working Draft specification for the XMLHttpRequest
object. XMLHttpRequest
object is used to retrieve data from a server asynchronously. Wait for a second, what did you just said, yes you heard it clearly. In the initial stages, XMLHttpRequest
used to fetch XML
data over HTTP
hence the name. But today it can be used with protocols other than HTTP
and it can fetch data not only in the form of XML
but also JSON
, HTML
or plain text.
The original concept behind the
XMLHttpRequest
object was originally created by the developers of Outlook Web Access (by Microsoft).
So let’s try with an example, we will make a simple request using XMLHttpRequest
, get a response and parse it as JSON
.
We need two listeners to be set to handle the success and error cases and a call to open()
and send()
. The response from the server is stored in the responseText
variable, which is converted to JavaScript object using JSON.parse()
.
We have used
XMLHttpRequest
for several years to request data other thanXML
, and that’s where the confusion starts when beginner try to learn how to make an asynchronous request in JavaScript.Isn’t there a cleaner and simple API to make an asynchronous request? well yes, there is and for that, we need to get back to present. So Let’s get back to the present.
Fetch
Fetch is a new native JavaScript API, supported by most browsers today. Fetch allows you to make network requests similar to XMLHttpRequest
. According to Google Developers Documentation Fetch makes it easier to make asynchronous requests and handle responses better than with the older XMLHttpRequest
. It is an improvement over the XMLHttpRequest
API. The main difference between Fetch and XMLHttpRequest
is that the Fetch API uses Promises, hence avoiding callback hell.
If you are new to promises then check out JavaScript Promises: an Introduction . You can make use of polyfill for browsers that are not currently supported.
Fetch Interfaces
The Fetch API has following interfaces
fetch()
: Thefetch()
method used to fetch a resource.Headers
: Represents response/request headers, allowing you to query them and take different actions depending on the results.Request
: Represents a resource request.Response
: Represents the response to a request.
Making a request using fetch()
A fetch()
function is available in the global window
object. The fetch()
function takes one mandatory argument, the path to the resource you want to fetch. It returns a Promise
, whether it is successful or not. If request is successful .then()
function will receive Response
object, if request fails then .catch()
function will receive an error
object
The Response Object
The above code makes use of Fetch API and makes a call to GitHub to fetch data about the user. When the promise is resolved we get a Response
object in return. But wait, if you try logging Response
object on the console you will find that it didn’t have the data which we want. That’s because a Response
object has information about the response itself. To actually get the data, we need to get the body of the response.
Since the Github API we’re using will return JSON
to us, the returned response will have .json()
method. We just need to call .json()
on the response variable. The .json()
method on a Response
object returns a Promise
, so we need to chain on another .then()
.
Headers Object
The Headers
interface allows you to create your own headers object via the Headers()
constructor. A headers object is a collection of name-value pairs.
Supplying options to fetch()
The fetch()
method accepts an optional second parameter, an init
object that allows you to customise the request.
Request Object
The Request
Object represents a resource request. Instead of passing an URL
of the resource into the fetch()
call, you can create a request object using the Request()
constructor, and pass that as an argument to fetch().
By passing Request object to the fetch()
, you can make customised requests.
Conclusion
Definitely, XMLHttpRequest
wasn’t made for the things we are using it today. Also, it’s API is kinda messed. The Fetch
API makes it easier to make asynchronous requests and handle responses better than using an XMLHttpRequest
. Fetch
allows us to create a better API for the simple things, using modern JavaScript features like promises
.
Let’s start fetching !!
Last updated