Difference Between Axios and Fetch in React

Consuming REST APIs in a React application can be done in various ways, but in this tutorial, we will be discussing how we can consume REST APIs using two of the most popular methods known as Axios (a promise-based HTTP client) and Fetch API (a browser in-built web API). I will discuss and implement each of these methods in detail and shed light on some of the cool features each of them have to offer.

What is a REST API

A REST API is an API that follows what is structured in accordance with the REST Structure for APIs. REST stands for “Representational State Transfer”. It consists of various rules that developers follow when creating APIs.

THE BENEFITS OF REST APIS

• Very easy to learn and understand;
• It provides developers with the ability to organize complicated applications into simple resources;
• It is easy for external clients to build on your REST API without any complications;
• It is very easy to scale;
• A REST API is not language or platform-specific but can be consumed with any language or run on any platform.

Fetch Vs Axios

1. Browser Compatibility: Axios has wider support than Fetch which support for browsers starts from Chrome 42+, Firefox 39+, Edge 14+, and Safari 10.1+
2. Syntax: Both Fetch and Axios have simple syntaxes but Axios converts responses to JSON by default while for Fetch you still have to do that. Also, Axios has shorthand methods which make HTTP methods easier
3. Handling Response Timeout: Axios provides a timeout option which makes it easy to handle timeout. Although Fetch provides something similar using AbortController() it is a bit more clunky.
4. Intercepting HTTP Requests: HTTP interceptors are needed when we need to change HTTP requests from our application to the server. Interceptors give us the ability to do that without having to write extra code. Axios allows us to do this
5. Making Multiple Requests Simultaneously: Fetch provides the same feature with the use of the promise.all() method, we can make multiple fetch() requests inside it, while Axios allows us to make multiple HTTP requests with the use of the axios.all() method.

Conclusion

Both methods are good ways to consume APIs in react but I would advice to use Fetch when you are building small applications and Axios when are building large applications with a lot of requirements.