INTRODUCTION

React is a front-end developer library used to create web applications. To build production-ready applications you must at some point generate APIs for your react application to be interactive and smooth. Every developer who makes use of react must learn to consume APIs and fetch data into applications. As a programmer or a software expert, you must have come across APIs at some point. APIs are channels or mediums through which different applications communicate programmatically with one other while returning a real-time response in real-time. API stands for Application Program Interface. [Check out the link below to see more on APIs;]

(cleo.com/blog/knowledge-base-what-is-an-api)

API PROTOCOLS OR ARCHITECTURES

There are three categories of protocols or architectures, which ranges from REST APIs, and RPC APIs to SOAP APIs. These different APIs contain unique characteristics and trades used for different purposes. REST API which stands for the Representational State Transfer Application Interface is the most popular architectural approach to building APIs.

What Are REST APIs?

REST API which stands for Representational State Transfer was defined in 2000 by Roy Fielding as the architectural process or methodology approach used in the development of internet services, such as distributed hypermedia systems. This process can be seen when a request is generated through a REST API, it sends a representation of its current state. This current state representation can take different forms such as XML or HTML or JSON which is used in React.

How Consume REST APIs In React

There are various ways to consume REST APIs in React.js but we will be considering two major approaches which include; The promise-based HTTP client [Axios] and The browser-in-built web API [Fetch].

Note: You must possess a certain level of knowledge in JavaScript, React and React hooks to completely understand how to consume REST APIs. However, we must understand that consuming APIs in React and JavaScript is completely different, this is because in React the API request is done in a React Component but it's not so in JavaScript.

How To Consume APIs Using The Fetch API

The Fetch API is a JavaScript built-in method for retrieving resources from a server or an API endpoint. The fetch() method requires a mandatory argument, which is the path or URL to the resource you want to fetch. It returns a Promise so you can handle success or failure using the then() and catch() methods. You can GET, POST, and also DELETE requests using the fetch API.

fetch('https://jsonplaceholder.typicode.com/posts?_limit=10') .then(response => response.json()) .then(data => console.log(data));

The above code is very simple to write and looks like a basic fetch request. We are fetching data from a URL and then logging it to the console. If we use the response's JSON method, we can get our output as a JSON object but the default response is usually a regular HTTP response.

Consuming APIs Using Axios

Axios is an HTTP client library based on promises that make it simple to send asynchronous requests to REST endpoints. Unlike the Fetch API, it is not built-in, so we will need to incorporate it into our project to use it. This endpoint in our case is the REST API, to which we will make GET, POST, and DELETE requests. The following command will add Axios to your project.

npx install Axios

After that, we Add an instance to Axios by using the .create() method which is optional but recommended as it saves us from unnecessary repetition. To create an instance, we use the .create method to specify information such as the URL and possibly headers.

import Axios from "Axios"; const client = Axios. create({ baseURL: "https://jsonplaceholder.typicode.com/posts" });

The difference between fetch and Axios

The major differences between the fetch and Axios are that Axios has a URL in the request object. Fetch has no URL in the request object. Axios is a stand-alone third-party package that can be easily installed. Fetch is built into most modern browsers; no installation is required as such.

Conclusion

In this article, we gave you the basics of REST API consumption using fetch and Axios.

This will able you to have an idea of what API consumption is and how to consume basic APIs for your projects and applications.