A Deep Dive into Understanding APIs from Scratch

When I was a beginner in frontend development, I didn’t know what an API was. At my very first job, I had to work on API integration, and that's where my learning journey began. In this series, I’ll be sharing everything I know to help you understand the fundamentals of APIs, API integration on the frontend, and much more. Follow along to get the most out of it!

So, What is an API?

Imagine you're at a restaurant. You ask the waiter to take your order, and you wait for your food. You don’t go directly to the kitchen to place the order, and the kitchen is hidden from you. Once your order is ready, the waiter brings it to you. In this analogy, the waiter is the API.

Just like how the waiter is the middleman between you and the kitchen, an API (Application Programming Interface) acts as the middleman between different software systems, allowing them to communicate with each other. It allows you to request data from a server (like placing an order) and receive a response (like getting your food).

What Does an API Do?

An API is used to connect the backend to the frontend. It acts as a bridge that allows communication between different systems. Here’s a simple breakdown:

• The frontend sends requests to the backend through the API.

• The backend processes the request, often involving database operations, and then sends the result back to the frontend through the same API.

• The frontend can then display the data to the user or perform further actions based on the response.

For example, when you submit a form on a website, the data is sent to the backend via an API, where it's stored in a database. When you request information, such as your profile details, the frontend makes an API call to the backend to fetch and display your data.

Types of APIs

There are many types of APIs, but let’s focus on the most commonly used ones in web development:

1. Third-Party APIs

   • These are APIs provided by external services that you can integrate into your application. Examples include Google Maps, social media APIs (like Facebook or Twitter), and payment APIs (like PayPal).

   • These APIs offer a wide range of functionalities and allow you to use their data or services in your app without building them from scratch.

2. REST APIs

   • REST (Representational State Transfer) is just an architectural style for building APIs.

   • REST APIs are stateless, meaning each request from a client to a server must contain all the information needed to understand and process the request (e.g., authentication, parameters).

   • REST APIs are commonly used in web services and work over HTTP methods like GET, POST, PUT, DELETE, etc.

3. RESTful APIs

   • RESTful APIs follow the principles of REST architecture. They use standard HTTP methods and focus on resources (entities) that can be represented in different formats like JSON or XML.

   • Keep in mind that the REST is just an architecture and the APIs which we make using the REST architecture are called RESTful APIs.

   • These APIs are highly scalable and stateless, which makes them ideal for web and mobile applications.

   • We’ll work with RESTful APIs in our entire series.

4. SOAP APIs

   • SOAP (Simple Object Access Protocol) is an older, XML-based protocol for accessing web services.

   • Unlike REST, SOAP requires a strict message format and relies on XML for communication.

   • While SOAP is more rigid and complex, it’s often used in enterprise environments where higher security and formalized contracts between the server and client are needed.

Let’s understand what API Integration is?

What is API Integration?

API integration is the process of connecting two or more software systems and processes to work together. In web development, it refers to the method of connecting the backend to the frontend using APIs to facilitate data exchange and communication between the two.

Examples of API Integration

Imagine you're building an e-commerce application. To manage inventory, you would need API integration to connect the frontend with the backend, ensuring accurate and real-time updates. Additionally, for transactions, you might integrate third-party APIs like PayPal, Stripe, or others to process payments securely and efficiently.

Basic API Integration on the Frontend

As a frontend developer, you might have some experience fetching APIs to retrieve data. In this section, we’ll explore how to fetch data first using the fetch API, and then with axios.

API Call with Fetch API

import { useEffect, useState } from "react";

export default function DynamicData() {
  const [data, setData] = useState([]);

  const getData = async () => {
    try {
      const data = await fetch("https://dummyjson.com/products");
      const productsJson = await data.json();
      setData(productsJson.products);
    } catch (error) {
      console.log(error);
    }
  };

  useEffect(() => {
    getData();
  }, []);

  return (
    <>
      <h1>How to display dynamic html data in react ?</h1>
      {data?.map((product) => (
        <li key={product.id}>{product.title}</li>
      ))}
    </>
  );
}

API Call with Axios

import { useEffect, useState } from "react";

export default function DynamicData() {
  const [data, setData] = useState([]);

  const getData = async () => {
    try {
      const data = await axios.get("https://dummyjson.com/products");
      setData(data.products);
    } catch (error) {
      console.log(error);
    }
  };

  useEffect(() => {
    getData();
  }, []);

  return (
    <>
      <h1>How to display dynamic html data in react ?</h1>
      {data?.map((product) => (
        <li key={product.id}>{product.title}</li>
      ))}
    </>
  );
}

Difference between Fetch API & AXIOS

Here, we are doing the same thing using Axios. Now, you might wonder when you should use fetch or axios. The main difference between the two is that with fetch, you need an extra step to convert the response into JSON, whereas with axios, this conversion is done automatically. If you need to make a simple API request, fetch is a good choice. However, if you need to integrate more complex backend APIs, such as authentication APIs, it's better to use axios. Axios provides additional features like interceptors, making API integration and error handling easier and more efficient.

Conclusion

You've reached the end of this article! In this article, I’ve covered the fundamentals of APIs. In the next article of this series, I’ll dive into getting started with RESTful APIs and explain the basics. Follow along with me to get the most out of this series. Thank you for reading! 🤍

Stay connected with me – Rumaisa Naveed