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

📘 Chapter 2: Making API Calls with JavaScript — fetch() and axios

🧭 What You’ll Learn

By the end of this chapter, you’ll understand:

• How to make HTTP requests using the native fetch() API
• How to simplify your API code using axios
• The structure of a typical API request and response
• Error handling techniques in both methods
• The differences between fetch and axios
• Real-world usage patterns with code samples
• When and why to use async/await

🌐 What Is an HTTP Request?

An HTTP request is a message sent by the client (your front-end code) to a server to:

• Retrieve data (GET)
• Send data (POST)
• Update data (PUT / PATCH)
• Delete data (DELETE)

The response usually comes back in JSON format.

🔹 Using the Native fetch() API

fetch() is built into modern browsers and returns a Promise, making it ideal for asynchronous operations.

✅ Syntax

js

fetch(url, {

  method: 'GET',

  headers: {

    'Content-Type': 'application/json',

    // 'Authorization': 'Bearer yourToken'

  },

  body: JSON.stringify(data) // Only for POST, PUT, PATCH

})

📌 Basic GET Example

js

fetch('https://jsonplaceholder.typicode.com/posts')

  .then(res => res.json())

  .then(data => console.log(data))

  .catch(err => console.error('Error:', err));

📌 POST Example

js

const postData = {

  title: 'Hello World',

  body: 'This is a post.',

  userId: 1

};

fetch('https://jsonplaceholder.typicode.com/posts', {

  method: 'POST',

  headers: {

    'Content-Type': 'application/json'

  },

  body: JSON.stringify(postData)

})

  .then(res => res.json())

  .then(data => console.log(data));

🔄 Using async/await with fetch()

js

async function fetchPosts() {

  try {

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

    const data = await res.json();

    console.log(data);

  } catch (error) {

    console.error('Fetch Error:', error);

  }

}

🚀 Using axios for API Calls

axios is a promise-based HTTP client library that simplifies many aspects of working with APIs.

📦 Install

bash

npm install axios

✅ GET Request

js

import axios from 'axios';

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

  .then(res => console.log(res.data))

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

✅ POST Request

js

axios.post('https://jsonplaceholder.typicode.com/posts', {

  title: 'New Post',

  body: 'Post content here',

  userId: 1

})

  .then(res => console.log(res.data))

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

✅ With async/await

js

async function createPost() {

  try {

    const res = await axios.post('https://jsonplaceholder.typicode.com/posts', {

      title: 'Async Post',

      body: 'Made with async/await',

      userId: 1

    });

    console.log(res.data);

  } catch (err) {

    console.error('Axios error:', err);

  }

}

📊 fetch() vs axios Comparison

🧠 Understanding API Request Structure

✅ Parts of an HTTP request:

• URL – The endpoint you want to call
• Method – GET, POST, PUT, DELETE, etc.
• Headers – Auth tokens, content type
• Body – Data (only for write operations)

📘 Example

js

fetch('https://api.site.com/posts', {

  method: 'POST',

  headers: {

    'Authorization': 'Bearer token123',

    'Content-Type': 'application/json'

  },

  body: JSON.stringify({ title: 'Post Title' })

})

⚠️ Error Handling Best Practices

With fetch():

js

fetch('https://api.site.com/data')

  .then(res => {

    if (!res.ok) throw new Error('Network response not ok');

    return res.json();

  })

  .catch(err => console.error('Fetch failed:', err));

With axios:

js

axios.get('https://api.site.com/data')

  .catch(error => {

    if (error.response) {

      console.error('Server responded with:', error.response.status);

    } else {

      console.error('Network or setup error:', error.message);

    }

  });

🧩 Real-World Scenarios

🧰 Handling Headers and Tokens

Setting headers manually:

js

fetch('/api/user', {

  headers: {

    'Authorization': 'Bearer YOUR_TOKEN',

    'Content-Type': 'application/json'

  }

});

With axios globally:

js

axios.defaults.headers.common['Authorization'] = 'Bearer YOUR_TOKEN';

🧼 Canceling Requests (axios only)

js

const controller = new AbortController();

axios.get('/api/data', { signal: controller.signal });

controller.abort(); // Cancel the request

🎨 UI Tips for API Integration

• Use loading spinners while waiting for data
• Disable buttons during API operations
• Handle error messages gracefully
• Provide retry options when a request fails

✅ Summary

In this chapter, you’ve learned how to:

• Use fetch() and axios for GET, POST, and other API calls
• Use async/await for cleaner syntax
• Handle errors effectively
• Compare the strengths of fetch() vs axios
• Pass headers, handle tokens, and structure API requests properly
• Use HTTP methods and status codes to manage CRUD operations

Up next: Chapter 3: Authentication and Secure API Access – where you'll handle token storage, protected endpoints, and secure API communication.