Fetch vs. AJAX vs. XHR vs. AXIOS

Turbo 360
dkwon360
June 27th, 2020
0 points
View Demo

Network requests with JavaScript can be done several ways which can be confusing for beginners. Furthermore, a certain technique may not be a good option depending on the use case and the environment. In this tip, we show four examples of network requests with JavaScript using the most common typical approaches:

  1. Fetch
  2. XHR
  3. AJAX
  4. Axios

The first three are done on the client side (the browser using <script> tag) while the fourth - Axios - is used on the server. The demo project fetches the most recent posts on Reddit for a given "sub" and renders them in a custom interface. To see it action, click HERE and to download the demo, click the "Download Source" link at the bottom of this page.

Setup

To set up the project, we create a Node/Express server which returns data from the url "/api/endpoint" whose code is shown below:

/routes/enpoint.js

This is a minimal route which returns a simple JSON array containing three Reddit subs with their respective names and path keys. Each of our browser examples queries this endpoint. The route file is connected in the app.js file shown here:

app.js

We import the "endpoint.js" file on line 10 and mount it on line 13 to the path "/api/endpoint" which our examples ultimately query.

1. Fetch

Fetch is a fairly recent addition to the JavaScript world (introduced in 2015) utilizing a modern syntax for making requests from the browser. Like most modern JS written today, Fetch is based on Promises rather than callbacks. In our project, the Fetch example can be seen here and the code is shown below:

/views/fetch.mustache

The actual Fetch request takes place in the <script> tag between lines 16 and 33. On line 16, we make a request to the url "/api/endpoint" which returns a list of Reddit subs available to view. The initial response is on line 17 ("payload") which we then convert into JSON and parse starting on line 19. The "data" object is an array of Reddit subs with "name" and "path" keys. In lines 22 through 28, we populate a <div> tag with id "list" using the objects in the data array and connect each element to a link to view the sub content.

The other two browser examples - AJAX, and XHR - perform the same exact process using their respective request modules. The end result however is the same.

2. XHR

XHR, short for "XMLHttpRequest", is the old fashioned way of making requests from the browser before Fetch came along. It uses the older JavaScript paradigm of binding callback handlers to a request object which get invoked based on success, failure and on-progress states. The XHR example in our demo can be seen here and the code is shown below:

views/xhr.mustache

On line 16, we instantiate the request object (xhr) then set the method and url on line 17. On line 20, we bind a callback listener which gets invoked when the request returns data ("onload") and the callback then populates the <div> tag just like in the Fetch example - in fact, that code is literally the same. On line 39 we bind an error callback function in case something goes wrong then on line 43, we go ahead and fire it off.

It's worth reiterating that XHR is an old-fashioned way of doing these sorts of requests and most modern developers would use Fetch in this case. However, as a developer you might find yourself working on a legacy codebase written many years ago and come across outdated patterns and styles so it is worth understanding at least at a basic level.

3. AJAX

AJAX is the jQuery based solution for making network requests in the browser. Like XHR, it is a bit outdated and giving way to Fetch however, a very large portion of legacy code uses jQuery and AJAX therefore it is very much worth understanding the APIs for it and jQuery in general. The AJAX example in our demo can be seen here and the code is shown below:

views/ajax.mustache

It is important to note line 14 in the code above which imports the jQuery library. Without this, the AJAX call would not work. The actual AJAX query begins on line 17. The url and method are clearly assigned on lines 18 and 20 and the callback handlers are placed on lines 21 (success) and 33 (error). The handler implementations are identical to the Fetch and XHR examples.

4. Axios

The final example, Axios, is our only situation where the request is made from our server. We use the Axios library to query the Reddit website with a specific sub, parse the JSON data returned, then render a Mustache template with the data restructured in our layout. The Axios request takes place in the "routes/index.js" file which is shown below:

routes/index.js

The Axios request route begins on line 22. It somewhat resembles the AJAX style wherein we pass an object to the axios function which contains the url, method and headers. The "payload" is the response from Reddit from which we parse out the pieces we want to render in the template (lines 31, 32, 33). Finally, we render the "axios" template with the desired data passed in as "feed" and "sub" on line 35. The axios template is shown below:

views/axios.mustache

We use Mustache templating to populate this template but that is beyond the scope of this tip. The reason we use Axios here is because the server environment does not come included with XHR or Fetch. Those are browser based APIs and therefore are not available on the server. This means we need to import a library to execute network requests and Axios is a very popular choice.  It is possible to use a library like Axios in the browser too using a bundler tool such as Webpack but that is also beyond the scope of this tip. In general, it is best to use the native APIs when possible to reduce bundle sizes but it is certainly not unusual for developers to use Axios in the browser using Webpack - to each his own! 

Conclusion

The main considerations when deciding how to make a network request are the following:

  • Browser based or server based
  • If legacy code, what is already being used?
  • If new project, what is the rest of the team familiar with?

Having at least a basic knowledge of the various options makes you more valuable as a developer when joining projects. The examples in this tip are intro examples for each situation and are not exhaustive by any means. If you intend to study this topic further, the next steps would be to make other types of HTTP requests such as POST and PUT. Hopefully, this gets you started on the right path and happy coding!

Join Free

Join for free today and deploy your site in seconds


Already have an account? Sign in HERE