Replace Jquery Ajax With Fetch

Posted on  by admin
by Janeth Kent Date: 19-02-2017javascriptapiajaxfetchvanilla.

When AJAX came to the modern web, it changed the definition of how web works. We all are using ajax for a long time but not with Fetch API.

To load a new content in a web page, we do not need a full page reload. Using AJAX, we can post or pull data from a web server asynchronously.

Almost every web application nowadays use ajax.

It was all possible because of the XMLHttpRequest. It is a browser API in the form of an object whose methods transfer data between a web browser and a web server.

The object is provided by the browser’s JavaScript environment.

Our one of the most popular JavaScript libraries, jQuery uses XMLHttpRequest to make HTTP calls. If we talk about any networking library in any modern JavaScript ecosystem uses XMLHttpRequest like axios (promise-based), superagent (callback-based). Making HTTP request with raw XMLHttpRequest really sucks. You need to take care a lot of things to get some data from the server.

To make a get request with XMLHttpRequest, we need to write the code like.


The problem can be solved using the Fetch API which is already present in our browser.

Fetch is a promise based HTTP networking API provided by the browser. It is here from the chrome 42. Firefox also supports it.


Here we are making a simple get request.

Fetch always returns a promise.

Promise resolves to the response object.

Not the answer you're looking for? Browse other questions tagged javascriptjqueryajaxgofetch or ask your own question.