Fetch API in Node.js v23: Everything You Need to Know

Node.js v23 introduced native support for the Fetch API, marking a significant step in making server-side JavaScript development more aligned with client-side practices. The Fetch API is a modern interface for making HTTP requests, and its inclusion in Node.js eliminates the need for external libraries like axios or node-fetch in many scenarios.

This article provides an in-depth look at the Fetch API in Node.js v23, offering clear explanations, practical examples, and real-world use cases to help developers make the most of this powerful feature.

What is the Fetch API?

Fetch API provides a modern JavaScript interface designed to facilitate network communication by making HTTP requests. It allows developers to interact with resources like APIs and websites over HTTP. Originally introduced in browsers, the Fetch API has become a standard for making asynchronous requests thanks to its simplicity and promise-based approach.

With Node.js v23, developers can now use the Fetch API directly in server-side code without installing additional dependencies.

Why Fetch API in Node.js Matters

Before Node.js v23, developers relied on libraries like axios or node-fetch to handle HTTP requests. While these libraries are powerful, they add extra dependencies to your project. The native Fetch API simplifies this process by providing:

Zero Dependencies: No need to install or maintain third-party libraries for basic HTTP requests.
Browser Compatibility: Write code that works consistently across client and server environments.
Modern Features: Leverage promises, async/await, and streaming capabilities without external tools.

Key Features of the Fetch API in Node.js v23

Promise-Based Interface

Fetch returns a Promise that resolves once the request is complete, simplifying asynchronous workflows.

Streaming Responses

Fetch supports streams, enabling efficient handling of large data payloads.

Built-In Support for Modern HTTP Features

It supports features like CORS, custom headers, and JSON handling.

Integration with Other Web APIs

Fetch works seamlessly with other APIs like Request and Response for better request management.

Basic Syntax of the Fetch API

The Fetch API uses a straightforward syntax to make HTTP requests:

fetch(url, options)
  .then(response => {
    // Handle the response
  })
  .catch(error => {
    // Handle any errors
  });

url: The endpoint you want to fetch.
options: An optional object to configure the request (e.g., method, headers, body).

Using the Fetch API in Node.js v23

1. Making a Basic GET Request

The simplest use of the Fetch API is to make a GET request to retrieve data:

const fetch = require('node:fetch'); // Optional if using Node.js v23+

(async () => {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error:', error);
  }
})();

2. Making a POST Request

To send data to an API, you can configure the Fetch API with a POST method and include a request body:

(async () => {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        title: 'Fetch API in Node.js',
        body: 'Learning how to use the Fetch API natively in Node.js v23.',
        userId: 1,
      }),
    });

    const data = await response.json();
    console.log('Created Post:', data);
  } catch (error) {
    console.error('Error:', error);
  }
})();

3. Handling Errors Gracefully

The Fetch API does not throw an error for HTTP status codes like 404 or 500. You need to check the ok property of the response object to handle errors:

(async () => {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/invalid-endpoint');
    if (!response.ok) {
      throw new Error(`HTTP Error: ${response.status}`);
    }
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Fetch Error:', error);
  }
})();

Advanced Features of the Fetch API

Streaming Responses

Fetch supports streaming large responses, such as files or media, to avoid memory overload:

const fs = require('fs');

(async () => {
  try {
    const response = await fetch('https://example.com/large-file.zip');
    const fileStream = fs.createWriteStream('./large-file.zip');
    response.body.pipe(fileStream);
    console.log('File downloaded successfully.');
  } catch (error) {
    console.error('Error:', error);
  }
})();

Setting Custom Headers

You can customize headers to include authentication tokens or other metadata:

(async () => {
  try {
    const response = await fetch('https://api.example.com/data', {
      headers: {
        'Authorization': 'Bearer your-token',
        'Accept': 'application/json',
      },
    });

    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error:', error);
  }
})();

Using AbortController

The Fetch API supports request cancellation using the AbortController:

const controller = new AbortController();
const signal = controller.signal;

(async () => {
  try {
    const fetchPromise = fetch('https://example.com/slow-response', { signal });

    // Cancel the request after 5 seconds
    setTimeout(() => controller.abort(), 5000);

    const response = await fetchPromise;
    const data = await response.json();
    console.log(data);
  } catch (error) {
    if (error.name === 'AbortError') {
      console.error('Request aborted');
    } else {
      console.error('Error:', error);
    }
  }
})();

Real-World Use Cases for Fetch API in Node.js

API Gateways

Use Fetch to act as a proxy between a front-end application and third-party APIs, transforming or caching data as needed.

Microservices Communication

In microservices architecture, Fetch can be used to communicate between services, exchanging data over HTTP.

Data Aggregation

Fetch can retrieve data from multiple APIs, aggregate the results, and serve them as a single API response.

Server-Side Rendering (SSR)

Fetch enables retrieving data from APIs during server-side rendering of pages in frameworks like Next.js.

Best Practices for Using Fetch API in Node.js

Validate Inputs: Always validate user inputs before making API requests to avoid security vulnerabilities.
Handle Errors Properly: Always check the ok property and catch exceptions to handle errors gracefully.
Use Environment Variables: Leverage environment variables to securely store sensitive data, such as API keys, ensuring your application stays protected.
Leverage Streaming for Large Data: Use streams for downloading or uploading large files.
Timeout Requests: Use AbortController to cancel long-running requests.

The Fetch API in Node.js v23 is a game-changer for server-side JavaScript development. Its native integration simplifies HTTP requests, reduces dependency on third-party libraries, and brings consistency between client-side and server-side code. By mastering the Fetch API and following best practices, developers can build robust, scalable, and maintainable applications.

As you explore the Fetch API, experiment with the provided examples and adapt them to your use cases. Whether you're building APIs, microservices, or server-side rendered applications, Fetch is a powerful tool that deserves a place in your toolkit.