Cross-Fetch: A Comprehensive Guide

Cross-fetch is a lightweight, easy-to-use library that enables universal fetch for a wide variety of environments, including Node.js and browser applications. This makes it widely beneficial for developers looking to create code that executes seamlessly across these platforms.

Basic Usage

Here’s how you can include and use cross-fetch in your project:

import fetch from 'cross-fetch';
fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(err => console.error('Fetch error: ', err));

API Examples

Fetching JSON Data

This example demonstrates fetching JSON data from an API:

import fetch from 'cross-fetch';
async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const json = await response.json();
    console.log(json);
  } catch (error) {
    console.error('Error fetching data: ', error);
  }
}
fetchData(); 

POST Request with JSON Payload

Performing a POST request with a JSON payload is simple with cross-fetch:

import fetch from 'cross-fetch';
async function postData() {
  try {
    const response = await fetch('https://api.example.com/upload', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ key: 'value' })
    });
    const json = await response.json();
    console.log(json);
  } catch (error) {
    console.error('Error posting data: ', error);
  }
}
postData(); 

Handling Errors

Handling errors gracefully in your fetch calls:

import fetch from 'cross-fetch';
async function fetchDataWithErrors() {
  try {
    const response = await fetch('https://api.example.com/data');
    if (!response.ok) {
      throw new Error(response.statusText);
    }
    const json = await response.json();
    console.log(json);
  } catch (error) {
    console.error('Error fetching data: ', error);
  }
}
fetchDataWithErrors(); 

Fetch with Timeout

Implementing a timeout for fetch requests:

import fetch from 'cross-fetch';
async function fetchWithTimeout(resource, options = {}) {
  const { timeout = 8000 } = options;

  const controller = new AbortController();
  const id = setTimeout(() => controller.abort(), timeout);
  const response = await fetch(resource, {
    ...options,
    signal: controller.signal
  });
  clearTimeout(id);

  return response;
}
fetchWithTimeout('https://api.example.com/data', { timeout: 5000 })
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(err => console.error('Fetch error: ', err));

Complete App Example

We will create a Node.js application that demonstrates the use of various cross-fetch capabilities:

import express from 'express'; import fetch from 'cross-fetch';
const app = express();
app.get('/data', async (req, res) => {
  try {
    const apiResponse = await fetch('https://api.example.com/data');
    const json = await apiResponse.json();
    res.json(json);
  } catch (error) {
    res.status(500).send('Error fetching data');
  }
});
app.post('/upload', async (req, res) => {
  try {
    const apiResponse = await fetch('https://api.example.com/upload', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(req.body)
    });
    const json = await apiResponse.json();
    res.json(json);
  } catch (error) {
    res.status(500).send('Error posting data');
  }
});
const PORT = process.env.PORT || 3000; app.listen(PORT, () => {
  console.log('Server is running on port', PORT);
}); 

In this example, we create an Express server with two endpoints: one for fetching data and the other for posting JSON data. This gives a good overview of how cross-fetch can be integrated into a practical application.

---

Hash: d16a5f1eb0014dc032ca06435125b4ffdf59f829f1087eed06bfe4c230ef5512