Making API Calls in SPA Frameworks

API calls involve sending requests to a remote server to fetch specific data, and the server responds with the requested information. Let's explore how to make API calls in single-page application (SPA) frameworks.

Making API Calls in React

Here is a simple API call with React.

import React, { useEffect, useState } from 'react';

function App() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data') // Replace with your API endpoint
      .then((response) => response.json())
      .then((data) => setData(data))
      .catch((error) => console.error('API Call Failed: ', error));
  }, []);

  return (
    <div>
      {data ? (
        <div>{JSON.stringify(data)}</div>
      ) : (
        <div>Loading...</div>
      )}
    </div>
  );
}

export default App;

Let's take a quick look at the explanation table that makes it easy to understand

Lines	Explanation
const [data, setData] = useState(null);	Handles user data
useEffect(() => { fetch('https://api.example.com/data') // Replace with your API endpoint .then((response) => response.json()) .then((data) => setData(data)) .catch((error) => console.error('API Call Failed: ', error)); }, []);	Makes the API call using the fetch(), get the response data and process the user data
return ( <div> {data ? ( <div>{JSON.stringify(data)}</div> ) : ( <div>Loading...</div> )} </div> );	Shows the result of API call

Making API Calls in Angular

If you're using Angular, you can make the API call like the one below,

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent implements OnInit {
  data: any;

  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.http.get('https://api.example.com/data') // Replace with your API endpoint
      .subscribe((response) => {
        this.data = response;
      }, (error) => {
        console.error('API call failed: ', error);
      });
  }
}

Let's check the explanation table for more details,

Function	Explanation
@Component({ selector: 'app-root', templateUrl: './app.component.html', })	Initializing Resources
data: any;	Variable that holds user data
ngOnInit() { this.http.get('https://api.example.com/data') // Replace with your API endpoint .subscribe((response) => { this.data = response; }, (error) => { console.error('API call failed: ', error); }); }	Makes the HTTP requst using this.http.get() and process the response data.

Making API Calls in Vue

Using Vue, making an API call is much simpler,

<template>
  <div>
    {{ data ? JSON.stringify(data) : 'Loading...' }}
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      data: null,
    };
  },
  mounted() {
    axios.get('https://api.example.com/data') // Replace with your API endpoint
      .then((response) => {
        this.data = response.data;
      })
      .catch((error) => {
        console.error('API call failed: ', error);
      });
  },
};
</script>

Let's take a quick look at the explanation table that makes it easy to understand

Function	Explanation
data() { return { data: null, }; },	Handles the data
mounted() { axios.get('https://api.example.com/data') // Replace with your API endpoint .then((response) => { this.data = response.data; }) .catch((error) => { console.error('API call failed: ', error); }); },	Makes the HTTP requset using axios.get() and process the response data.