Tiny 500b fetch "barely-polyfill"

• Tiny: under 500 bytes of ES3 gzipped
• Minimal: just fetch() with headers and text/json/xml responses
• Familiar: a subset of the full API
• Supported: supports IE8+ (assuming Promise is polyfilled of course!)
• Standalone: one function, no dependencies
• Modern: written in ES2015, transpiled to 500b of old-school JS

🤔 What's Missing?

• Uses simple Arrays instead of Iterables, since Arrays are iterables
• No streaming, just Promisifies existing XMLHttpRequest response bodies

• Install
• Usage
• Examples & Demos
• API
• Contribute
• License

This project uses node and npm. Go check them out if you don't have them locally installed.

$ npm install --save unfetch

Then with a module bundler like rollup or webpack, use as you would anything else:

// using ES6 modules
import fetch from 'unfetch'

// using CommonJS modules
var fetch = require('unfetch')

The UMD build is also available on unpkg:

<script src="//unpkg.com/unfetch/dist/unfetch.umd.js"></script>

This exposes the unfetch() function as a global.

As a ponyfill:

import fetch from 'unfetch';

fetch('/foo.json')
  .then( r => r.json() )
  .then( data => {
    console.log(data);
  });

Globally, as a polyfill:

import 'unfetch/polyfill';

// "fetch" is now installed globally if it wasn't already available

fetch('/foo.json')
  .then( r => r.json() )
  .then( data => {
    console.log(data);
  });

Real Example on JSFiddle ➡️

// simple GET request:
fetch('/foo')
  .then( r => r.text() )
  .then( txt => console.log(txt) )


// complex POST request with JSON, headers:
fetch('/bear', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ hungry: true })
}).then( r => {
  open(r.headers.get('location'));
  return r.json();
})

Adapted from the GitHub fetch polyfill readme.

The fetch specification differs from jQuery.ajax() in mainly two ways that bear keeping in mind:

• By default, fetch won't send or receive any cookies from the server, resulting in unauthenticated requests if the site relies on maintaining a user session.

fetch('/users', {
  credentials: 'include'
});

• The Promise returned from fetch() won't reject on HTTP error status even if the response is an HTTP 404 or 500. Instead, it will resolve normally, and it will only reject on network failure or if anything prevented the request from completing.

  To have fetch Promise reject on HTTP error statuses, i.e. on any non-2xx status, define a custom response handler:

fetch('/users')
  .then( checkStatus )
  .then( r => r.json() )
  .then( data => {
    console.log(data);
  });

function checkStatus(response) {
  if (response.ok) {
    return response;
  } else {
    var error = new Error(response.statusText);
    error.response = response;
    return Promise.reject(error);
  }
}

First off, thanks for taking the time to contribute! Now, take a moment to be sure your contributions make sense to everyone else.

Found a problem? Want a new feature? First of all see if your issue or idea has already been reported. If it hasn't, just open a new clear and descriptive issue.

Pull requests are the greatest contributions, so be sure they are focused in scope, and do avoid unrelated commits.

💁 Remember: size is the #1 priority.

Every byte counts! PR's can't be merged if they increase the output size much.

• Fork it!
• Clone your fork: git clone https://github.com/<your-username>/unfetch
• Navigate to the newly cloned directory: cd unfetch
• Create a new branch for the new feature: git checkout -b my-new-feature
• Install the tools necessary for development: npm install
• Make your changes.
• npm run build to verify your change doesn't increase output size.
• npm test to make sure your change doesn't break anything.
• Commit your changes: git commit -am 'Add some feature'
• Push to the branch: git push origin my-new-feature
• Submit a pull request with full remarks documenting your changes.

MIT License © Jason Miller