Forem: Christian Ndu

How to consume APIs in React using Fetch and Axios with the Async Await syntax

Christian Ndu — Mon, 11 Apr 2022 18:30:30 +0000

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 to learn more.

Here's an example of a GET request

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

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

using npm

npm install axios

using yarn

yarn add axios

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)

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!

My Goals For The HNGi8 x I4G internship

Christian Ndu — Tue, 17 Aug 2021 01:00:07 +0000

Hooray!! The much revered HNG internship has begun for the year.
I'm particularly excited about this year's edition because I feel better prepared to go all the way to the final stage in the backend track.
The program is hosted by The Zuri Team.

As our first task we have been asked to publicly state our goals/objectives for the internship. For this internship I have three main objectives.

OBJECTIVE 1:

This internship usually consists of people from diverse cultures and communities all around the world and so I'm excited about connecting with as many people as I can.

OBJECTIVE 2:

I plan to gain real world experience by applying all the knowledge I have gathered for over a year of coding to the tasks and challenges we will be asked to work on. This is the most important goal for me as it also helps me build projects with a team and also share knowledge.

OBJECTIVE 3:

I don't think it makes sense to start something and give up halfway through, for this year's edition (unlike last year) I plan to make it to the final selection in the backend track. I left early last year cause I got frustrated with the program's organization I hope this year will be different.

So that's all for now, wish me luck I need it.

Here are some helpful links to tutorials if you're just getting started with web development.

Figma Tutorial by Traversy Media

Git Tutorial by Traversy Media

HTML Tutorial by Traversy Media

JavaScript Tutorial by Traversy Media

Make sure you continue to explore his channel as he has a lot of quality content.
Cheers!

Beginner Dilemma

Christian Ndu — Fri, 08 May 2020 23:58:26 +0000

When do we get an actual beginner-friendly forum? I have many issues it is becoming overwhelming.