7 - Consuming APIs with TypeScript: Mastering fetch, axios, and Asynchronous Data Handling

In modern web development, integrating with APIs is essential to create rich, dynamic applications. Using TypeScript to consume APIs not only increases the safety of your code with static typing but also improves maintainability and clarity when dealing with HTTP requests and asynchronous data. In this article, we'll explore two popular approaches for making HTTP requests—fetch and axios—and share best practices for handling asynchronous data.

Why Consume APIs with TypeScript?

Integrating TypeScript into your API communication process offers several benefits:

Type Safety: You can define interfaces for the data returned by the API, reducing runtime errors.
Autocompletion and Validation: Enhanced IDE support with autocompletion and type validation improves the developer experience.
Maintainability and Scalability: Clearly defined data structures make it easier to track and fix issues as your project evolves.

Using `fetch` for HTTP Requests

The native fetch method is widely used in JavaScript for making HTTP requests. It can be easily integrated with TypeScript to ensure greater safety when handling data.

Practical Example with `fetch`

// api.ts

// Define the Post interface to describe the structure of a post.
interface Post {
  userId: number;
  id: number;
  title: string;
  body: string;
}

// Asynchronous function that fetches posts from an API endpoint.
// It returns a Promise that resolves to an array of Post objects.
export const fetchPosts = async (): Promise<Post[]> => {
  try {
    // Make an HTTP GET request to the API endpoint.
    const response = await fetch('https://jsonplaceholder.typicode.com/posts');
    
    // If the response is not OK (status outside the range 200-299), throw an error.
    if (!response.ok) {
      throw new Error(`Request error: ${response.statusText}`);
    }
    
    // Parse the response body as JSON and type it as an array of Post objects.
    const data: Post[] = await response.json();
    
    // Return the fetched data.
    return data;
  } catch (error) {
    // Log any errors that occur during the fetch operation.
    console.error('Error fetching posts:', error);
    
    // Return an empty array in case of an error.
    return [];
  }
};

In this example, we define a Post interface to type the returned data and use async/await to handle the asynchronous operation elegantly.

Using `axios` for HTTP Requests

axios is a popular library that simplifies making HTTP requests by providing a more robust API and additional features such as interceptors for requests and responses.

Practical Example with `axios`

// api.ts
import axios from 'axios';

// Define the Post interface to describe the structure of a post.
interface Post {
  userId: number;
  id: number;
  title: string;
  body: string;
}

// Asynchronous function that fetches posts using axios.
// It returns a Promise that resolves to an array of Post objects.
export const fetchPostsAxios = async (): Promise<Post[]> => {
  try {
    // Make an HTTP GET request with axios to the API endpoint.
    // The generic <Post[]> ensures the response data is typed correctly.
    const response = await axios.get<Post[]>('https://jsonplaceholder.typicode.com/posts');
    
    // Return the data from the response.
    return response.data;
  } catch (error) {
    // Log any errors that occur during the axios request.
    console.error('Error fetching posts with axios:', error);
    
    // Return an empty array if an error occurs.
    return [];
  }
};

Here, using <Post[]> with axios ensures that the received data matches the defined interface, making development and debugging easier.

Handling Asynchronous Data

Working with asynchronous data is crucial when consuming APIs. Some best practices include:

Using async/await: This makes your code more readable and simplifies error handling.
Error Handling: Always check if the request was successful and implement error handling for potential failures.
Typing Data: Use interfaces to define the expected data structure, ensuring consistency and safety.

Integrating API Data in a React Component

Below is an example of integrating the post-fetching function into a React component:

// PostsList.tsx
import React, { useEffect, useState } from 'react';
import { fetchPosts } from './api'; // Import the fetchPosts function from the API module.

// Define the Post interface again for component-level type safety.
interface Post {
  userId: number;
  id: number;
  title: string;
  body: string;
}

// Functional component that displays a list of posts.
const PostsList: React.FC = () => {
  // State to hold the list of posts; initialized as an empty array.
  const [posts, setPosts] = useState<Post[]>([]);
  // State to track the loading status; initialized as true.
  const [loading, setLoading] = useState<boolean>(true);

  // useEffect hook runs once when the component mounts to fetch posts.
  useEffect(() => {
    // Define an asynchronous function to get posts.
    const getPosts = async () => {
      // Await the result from fetchPosts.
      const postsData = await fetchPosts();
      // Update the posts state with the fetched data.
      setPosts(postsData);
      // Set loading to false after the data is fetched.
      setLoading(false);
    };

    // Call the asynchronous function to initiate data fetching.
    getPosts();
  }, []); // Empty dependency array ensures this effect runs only once.

  // If the data is still loading, render a loading message.
  if (loading) return <p>Loading posts...</p>;

  // Render the list of posts once data has been fetched.
  return (
    <div>
      <h2>Posts</h2>
      <ul>
        {/* Map over the posts array to render each post's title and body */}
        {posts.map(post => (
          <li key={post.id}>
            <h3>{post.title}</h3>
            <p>{post.body}</p>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default PostsList;

In this component, the useEffect hook fetches data when the component mounts, and useState manages both the posts and loading state.

Final Thoughts

Consuming APIs with TypeScript is an essential skill for modern developers, enabling you to build secure and scalable applications. Both fetch and axios provide efficient solutions for making HTTP requests, and proper asynchronous data handling makes your code more robust and reliable.

Why Consume APIs with TypeScript?

Using fetch for HTTP Requests

Practical Example with fetch

Using axios for HTTP Requests

Practical Example with axios