fetch-ponyfill

What is fetch-ponyfill?

The fetch-ponyfill npm package provides a ponyfill for the Fetch API, which means it offers a way to use the Fetch API in environments where it is not natively available, such as older browsers or Node.js. Unlike a polyfill, a ponyfill does not modify the global environment but instead provides the functionality as a module.

What are fetch-ponyfill's main functionalities?

Basic Fetch Request

This code demonstrates how to perform a basic fetch request using fetch-ponyfill. It fetches data from a placeholder API and logs the response.

const fetch = require('fetch-ponyfill')().fetch;

fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

Custom Headers

This code demonstrates how to make a POST request with custom headers using fetch-ponyfill. It sends a JSON payload to the server and logs the response.

const fetch = require('fetch-ponyfill')().fetch;

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer token'
  },
  body: JSON.stringify({ title: 'foo', body: 'bar', userId: 1 })
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

Handling Errors

This code demonstrates how to handle errors in fetch requests using fetch-ponyfill. It checks if the response is not ok and throws an error if the fetch fails.

const fetch = require('fetch-ponyfill')().fetch;

fetch('https://jsonplaceholder.typicode.com/invalid-url')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok ' + response.statusText);
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('Fetch error:', error));

Other packages similar to fetch-ponyfill

node-fetch

node-fetch is a lightweight module that brings window.fetch to Node.js. It is similar to fetch-ponyfill in that it provides Fetch API functionality in environments where it is not natively available. However, node-fetch is specifically designed for Node.js and does not work in the browser.

axios

axios is a promise-based HTTP client for the browser and Node.js. It provides a more feature-rich API compared to fetch-ponyfill, including support for request and response interceptors, automatic JSON transformation, and more. Unlike fetch-ponyfill, axios is not a ponyfill for the Fetch API but a separate library with its own API.

isomorphic-fetch

isomorphic-fetch is a library that allows you to use the Fetch API in both Node.js and browser environments. It is similar to fetch-ponyfill in that it aims to provide a consistent Fetch API across different environments. However, isomorphic-fetch is a polyfill and modifies the global environment, unlike fetch-ponyfill which is a ponyfill.

README

Fetch Ponyfill

WHATWG fetch ponyfill

This module wraps the github/fetch polyfill in a CommonJS module for browserification, and avoids appending anything to the window, instead returning a setup function when fetch-ponyfill is required. Inspired by object-assign.

When used in Node, delegates to node-fetch instead.

Usage

Browserify

const {fetch, Request, Response, Headers} = require('fetch-ponyfill')(options);

Webpack

import fetchPonyfill from 'fetch-ponyfill';
const {fetch, Request, Response, Headers} = fetchPonyfill(options);

Options

Where options is an object with the following optional properties:

option	description
Promise	An A+ Promise implementation. Defaults to window.Promise in the browser, and global.Promise in Node.
XMLHttpRequest	The XMLHttpRequest constructor. This is useful to feed in when working with Firefox OS. Defaults to window.XMLHttpRequest. Has no effect in Node.

Changelog

7.1.0

• Updates whatwg-fetch to 3.5.0 to address an issue with IE11.