A common requirement on any project is to get data from an API and then display the results on the web page. This sounds simple enough, however, the out-of-the-box fetch() can not be guaranteed to work in every situation. It will work in all new browsers but not all old browsers. fetch() is not natively supported when you are writing NodeJS applications. Having a one size fits all solution for calling APIs in JavaScript is possible, however, there are loads of different options. If you do a simple Google search you will quickly see that there are many packages that allow you to do this. In this tutorial, I will compare four of the most widely used packages for fetching data from an API, cross-fetch, isomorphic-fetch, isomorphic-unfetch and Axios. After reading this article, you should have a clear picture as to which package you should use, sound good? Let us begin!
cross-fetch
cross-fetch is the package that I have been using extensively on my current project. I work as part of a 30 person team. We are building a high-transaction e-commerce website using a micro-front end architecture. The application is written using ReactJs as the frontend framework. The backend is written using NodeJs and ExpressJS. The benefit of using cross-fetch is that it works across platforms. We can use cross-fetch within our react components/redux store and it works in all browsers. We can also use it within the node server to make server-side calls. Having code that looks and works the same no matter where you are in the code base is really useful. cross-fetch is not the most widely downloaded package, as this graph shows, however, so far cross-fetch has met our needs. The Redux team also recommends cross-fetch and use it extensively in their documentation.
If you are wondering why the team didn't decide to use isomorphic-fetch - which is a more popular package - then another feature the team liked is that cross-fetch uses a ponyfill rather than a polly-fill. Using a ponyfill means the package doesn't try to change or patch anything, instead the fetch functionality is imported as a normal module so you can use it without affecting other areas in the codebase.
An example of how to call an API with cross-fetch is shown below:
Axios
Axios is another 'fetch()' alternative that is supported in React. axios can be added into your project using this comamnd:
I think the main reason why most people like axios because the code required to call an API using axios is pretty clean and simple, as seen below:
One of the benefits of using Axios is that it provides more functionality than some of the other packages. For example, it provides the ability to cancel requests which can be useful to use within componentWillUnmount(). The main reason why people tend to not want to use axios is that the bundle size is a lot larger compared to cross-fetch or isomorphic-fetch. If you work on a high-transaction site where speed and page load is key then cutting your bundle size down is really important. In these situations, you may want to trade the extra features with the size.
isomorphic-fetch
As the name implies, isomorphic-fetch works for both NodeJs and within the browser. isomorphic-fetch is a polyfill module rather than a pony-fill. It is built on top of the fetch polyfill.
To call data with 'isomorphic-fetch' you can write this code:
isomorphic-unfetch
https://github.com/developit/unfetch/tree/master/packages/isomorphic-unfetch is an alternative isomorphic fetch package that also works across the browser and NodeJsapplications. It can be used as either a ponyfill or a polyfill. The package is very bare-bones and comes with a very small bundle size.
As you can see by comparing these versions, the best package to use to get data from an API will be determined by the type of application you are building, how much browsers support you care about, your preference for polyfill, or, ponyfill, and the bundle size. axios is great and feature-rich. If I were building a ReactJS only application, I would tend to pick this. If bundle size is key then cross-fetch is a good choice. Happy coding!
