How to consume APIs in React using Fetch and Axios with the Async Await syntax
Tags: react, javascript, webdev, beginners
Published: 2022-04-11 18:30:30

Good day lovely friend of the internet, You have probably come across the term API before maybe on Twitter, a developer slack/discord channel or heard someone mention it somewhere. In this article I'm going to explain to you what APIs are and how to consume them in Reactjs.

## What are APIs?
 A - Application, P - Programming, I - Interface(s) 
A definition from Wikipedia goes like "An application programming interface (API) is a connection between computers or between computer programs. It is a type of software interface, offering a service to other pieces of software."

In essence, APIs are a way to send and receive data from a client (frontend) to a server (backend)

## Pre-requisites
Before going further in this article, I expect you to have forehand knowledge of React, React Hooks and Functional Components in React. 
You do? Then lets Go!

## Using *Fetch*

Fetch is a built-in JavaScript method that allows you to make API requests in client-side JavaScript. Its comes by default with JavaScript and you don't need to install anything to make use of it on the client side. Refer to the [MDN page on Fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) to learn more.

Here's an example of a GET request
```jsx
import { useState, useEffect } from "react";

export default function Post() {
	const [posts, setPosts] = useState([]);
	const url = "https://jsonplaceholder.typicode.com/posts";

	// We add the `async` keyword to enable the use of `await`
	const getPosts = async () => {
	// The `await` keyword ensures the request is fulfilled
		// before the result is returned
		try {
			const response = await fetch(url);
// The response is parsed to JSON so we can manipulate it easily
			const data = response.json();
			setPosts(data);
		} catch (error) {
			console.log(error);
		}
	};
	useEffect(() => {
		getPosts();
	}, []);
	return (
		<>
			{posts.map((post, index) => (
				<div key={index}>
					<h1>{post.title}</h1>
					<p>{post.body}</p>
				</div>
			))}
		</>
	);
}

```

## Using *Axios*
Axios is an open-source JavaScript library. It is a Promise based HTTP client for the browser and node.js. You can learn more about it in the [official documentation](https://axios-http.com/)

First you need to install the package as a dependency in our application

### using npm
```
npm install axios 
```

### using yarn
```
yarn add axios
```

```js
import { useState, useEffect } from "react";
import axios from "axios";

export default function Post() {
	const [posts, setPosts] = useState([]);
	const url = "https://jsonplaceholder.typicode.com/posts";

	const getPosts = async () => {
		try {
			const response = await axios(url);
			setPosts(response.data);
		} catch (error) {
			console.log(error);
		}
	};

	useEffect(() => {
		getPosts();
	}, []);
	return (
		<>
			{posts.map((post, index) => (
				<div key={index}>
					<h1>{post.title}</h1>
					<p>{post.body}</p>
				</div>
			))}
		</>
	);
}

```
In summary, we define the `getPosts` function and make it run only once which is when the component loads (this is done by passing an empty array of dependencies as useEffect's second argument, see [how it works](https://reactjs.org/docs/hooks-effect.html))

We also use try/catch to make our code more readable and to handle errors more efficiently.

The most notable differences between using Fetch and Axios is that you don't need to parse the response to JSON with Axios unlike Fetch and also that the Axios response isn't an `array` like Fetch but a JavaScript `object` where our actual data lies in a `data` key. To keep the article short and simple I only made GET requests but you can make other HTTP requests like POST, PUT, DELETE etc. using Fetch and Axios.

That's it!