API Handling in JavaScript & React: From Basics to Pro-Level

Learn JavaScript api handling with fetch, axios, and error handling. API handling refers to making HTTP requests to a server to fetch or send data.

Hello my fellow frontend developers, today i will be discussing one of the most important concept in javascript, api handling.

I'll be creating my code snippets on Scribbler.live first, which is a fantastic platform that allows you to run a JavaScript Notebook, Online Compiler, and Editor without the need for manual setup.
Additionally, I am including a link to code snippets that includes all of the code examples so you can open the snippet and run it yourself to see the results.
I will be using scrib.show from scribbler.live, it is equivalent to console.log
Only examples from fetch api will be added to scribbler as currently it doesn't support axios and react.

Let's dive in

Table of contents

What is API
What is API handling
HTTP Methods
Making API Requests in JavaScript
Conclusion

What is API?

An API is a set of definitions and protocols that enable two software components to communicate.
Some of the technologies used to write apis are:
- Javascript (Express framework)
- Python (Django framework)
- Go (Gin framework)
- Java (Spring Boot framework)
- C# (ASP.NET Core framework)

What is API handling?

API handling refers to making HTTP requests to a server to fetch or send data. In JavaScript and React, API calls are commonly handled using fetch, Axios, or libraries like React Query or TanStack Query.

HTTP Methods

APIs work with different HTTP methods, each serving a specific purpose:

GET – Fetch data from the server.
POST – Send new data to the server.
PUT – Update existing data (replaces the entire resource).
PATCH – Update part of an existing resource.
DELETE – Remove data from the server.

Making API Requests in JavaScript

Fetch method

The native fetch API method is commonly used to interact with APIs. It accepts 2 arguments - API endpoint and options objects to pass headers, body, method, etc.

Fetch method with GET request

fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => response.json())
  .then(data => scrib.show(data))
  .catch(error => scrib.show('Error:', error));

Fetch method with POST request

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST', // type of method GET, POST, PUT, POST, DELETE
  headers: {
    'Content-Type': 'application/json' // headers like referrer, bearer, content-type, custom headers, etc.
  },
  // body of the POST request which we are sending to the api
  body: JSON.stringify({
    title: 'Javascript is awesome',
    body: 'Did you know you could write html and javascript combined in scribbler',
    userId: 1
  })
})
  .then(response => response.json())
  .then(data => scrib.show(data))
  .catch(error => scrib.show('Error:', error));

Error handling with fetch method

fetch('https://jsonplaceho.typicode.com/posts') // incorrect api endpoint
  .then(response => response.json())
  .then(data => scrib.show(data))
  .catch(error => scrib.show('Error:', error)); // will run this block of code and throws error

Handling api with try catch finally block

async function getData() {
  try {
    let response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
    if (!response.ok) throw new Error('Network response was not ok'); // return boolean for valid/invalid responses
    let data = await response.json();
    scrib.show(data)
  } catch (error) {
    scrib.show('Fetch error:', error); // will handle the error if the fetch fails
  } finally {
    scrib.show(Fetch request is done); // will run no matter a response is valid or invalid or fetch fails
  }
}
getData()

Checkout this embed to run the code example mentioned above

app.scribbler.live

Axios

Axios is a javascript library that simplifies API handling and provides better error handling.

Axiox with GET request

import axios from "axios"

// all http methods could be chained with axios
axios.get('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => scrib.show(response.data))
  .catch(error => scrib.show('Error:', error));

Axios with POST request

import axios from "axios"

// json body is passed separately as second argument and rest of the options as third argument
axios.post('https://jsonplaceholder.typicode.com/posts', {
   title: 'Javascript is awesome',
    body: 'Did you know you could write html and javascript combined in scribbler',
    userId: 1
}, {
  headers: { 'Content-Type': 'application/json' }
})
  .then(response => scrib.show(response.data)) // automatically converts the response to json format
  .catch(error => scrib.show('Error:', error));

Error handling with axios

import axios from "axios"

axios.get('https://jsonpl.typicode.com/posts') // incorrect url
  .then(response => scrib.show(response.data))
  .catch(error => {
// has multiple error response for different scenarios
    if (error.response) {
      scrib.show('Server responded with:', error.response.status);
    } else if (error.request) {
      scrib.show('No response received');
    } else {
      scrib.show('Error setting up request:', error.message);
    }
  });

Handling api with try catch finally block

import axios from "axios";

const fetchData = async () => {
  try {
    const response = await axios.get("https://jsonplaceholder.typicode.com/posts");
    console.log("Data fetched successfully:", response.data);
    return response.data;
  } catch (error) {
    console.error("Error fetching data:", error.response?.data || error.message);
    return null;
  } finally {
    console.log("Fetch is done")
  }
};

fetchData();

React (using useEffect and useState)

import { useEffect, useState } from 'react';

function Posts() {
  // Creating states for data and error messages
  const [posts, setPosts] = useState([]);
  const [error, setError] = useState(null);

  // Performing data fetching in useEffect, will run only once on page load
  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then(response => {
        if (!response.ok) {
          throw new Error('Failed to fetch');
        }
        return response.json();
      })
      .then(data => setPosts(data))
      .catch(error => setError(error.message));
  }, []);

  if (error) return <p>Error: {error}</p>;

  return (
    <div>
      <h2>Posts</h2>
      <ul>
        {posts.map(post => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

export default Posts;

Tanstack query library

import { useQuery } from '@tanstack/react-query';
import axios from 'axios';

// fetch the data and return it
const fetchPosts = async () => {
  const { data } = await axios.get('https://jsonplaceholder.typicode.com/posts');
  return data;
};

function Posts() {
  // tanstack has builtin data, error, loading states
  const { data: posts, error, isLoading } = useQuery({ queryKey: ['posts'], queryFn: fetchPosts });

  if (isLoading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <ul>
      {posts.map(post => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

export default Posts;