API Integration for Front-End Developers: A Practical Guide to Connecting Interfaces and Data

📘 Chapter 5: API Integration in Modern Frameworks (React, Vue, Angular)

🧭 What You’ll Learn

In this chapter, you’ll learn how to:

• Make API calls in React, Vue, and Angular
• Manage loading, error, and success states
• Use hooks in React, composition API in Vue, and services in Angular
• Implement token-based authentication with global headers
• Organize API logic with best practices for each framework

🧩 Why Frameworks Need APIs

Whether you're building a to-do app, admin dashboard, or an e-commerce site—every serious application needs data. And that data usually comes from an external or internal API.

Unlike vanilla JavaScript, modern frameworks offer:

• Lifecycle hooks (e.g., useEffect, mounted, ngOnInit)
• Reusable components
• Centralized state or data services
• Routing for protected paths

📦 React: API Integration

React uses hooks like useEffect and useState to manage data-fetching logic.

🔧 Example: Fetch Posts in React

jsx

import { useEffect, useState } from 'react';

import axios from 'axios';

function Posts() {

  const [posts, setPosts] = useState([]);

  const [loading, setLoading] = useState(true);

  useEffect(() => {

    axios.get('https://jsonplaceholder.typicode.com/posts')

      .then((res) => setPosts(res.data))

      .catch((err) => console.error(err))

      .finally(() => setLoading(false));

  }, []);

  if (loading) return <p>Loading...</p>;

  return (

    <ul>

      {posts.map(post => (

        <li key={post.id}>{post.title}</li>

      ))}

    </ul>

  );

}

🧠 React Best Practices

• Extract API logic into custom hooks (usePosts.js)
• Use useContext or libraries like Redux for global token storage
• Handle tokens in axios default headers:

js

axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;

🖼 Vue 3: API Integration

Vue 3 uses the Composition API (setup(), ref(), onMounted()) or the Options API (data, mounted, methods).

🔧 Example: Fetch Data with Composition API

vue

<template>

  <ul v-if="!loading">

    <li v-for="post in posts" :key="post.id">{{ post.title }}</li>

  </ul>

  <p v-else>Loading...</p>

</template>

<script setup>

import { ref, onMounted } from 'vue';

import axios from 'axios';

const posts = ref([]);

const loading = ref(true);

onMounted(async () => {

  try {

    const res = await axios.get('https://jsonplaceholder.typicode.com/posts');

    posts.value = res.data;

  } catch (err) {

    console.error(err);

  } finally {

    loading.value = false;

  }

});

</script>

🧠 Vue Best Practices

• Use ref() for reactive values
• Use Pinia or Vuex for global token/state management
• Place API calls in reusable composables or store actions

⚙️ Angular: API Integration

Angular uses services and dependency injection for centralized API logic.

🔧 Create a Service

bash

ng generate service api

🔧 api.service.ts

ts

import { Injectable } from '@angular/core';

import { HttpClient } from '@angular/common/http';

@Injectable({ providedIn: 'root' })

export class ApiService {

  constructor(private http: HttpClient) {}

  getPosts() {

    return this.http.get('https://jsonplaceholder.typicode.com/posts');

  }

}

🔧 Use Service in Component

ts

import { Component, OnInit } from '@angular/core';

import { ApiService } from './api.service';

@Component({

  selector: 'app-posts',

  template: `

    <div *ngIf="loading">Loading...</div>

    <ul *ngIf="!loading">

      <li *ngFor="let post of posts">{{ post.title }}</li>

    </ul>

  `

})

export class PostsComponent implements OnInit {

  posts: any[] = [];

  loading = true;

  constructor(private api: ApiService) {}

  ngOnInit() {

    this.api.getPosts().subscribe({

      next: (res: any) => this.posts = res,

      error: (err) => console.error(err),

      complete: () => this.loading = false

    });

  }

}

🔐 Handling Authentication Tokens

Angular Interceptor Example

ts

@Injectable()

export class AuthInterceptor implements HttpInterceptor {

  intercept(req: HttpRequest<any>, next: HttpHandler) {

    const token = localStorage.getItem('token');

    const authReq = req.clone({

      headers: req.headers.set('Authorization', `Bearer ${token}`)

    });

    return next.handle(authReq);

  }

}

Register it in app.module.ts under providers.

🔃 Common API Lifecycle Hooks

📄 CRUD Operation Table (Across Frameworks)

🧠 API Structure Best Practices

✅ Summary

You’ve now learned how to:

• Integrate APIs in React, Vue, and Angular apps
• Handle asynchronous logic with each framework's lifecycle method
• Send tokens in headers securely
• Organize code using services, hooks, or composables
• Structure CRUD logic in components cleanly