The Fetch API is widely known for being a lot cleaner than a XMLHttpRequest, theoretically easier to use and obviously an API that isn't available on every browser. According to Google:
The main difference is that the Fetch API uses Promises, which enables a simpler and cleaner API, avoiding callback hell and having to remember the complex API of XMLHttpRequest. [Learn more in Introduction to fetch()]
This API is available since Chrome 42. One of the problems of this API is, that uses as well an API that isn't supported neither in all browsers (promises), so you will need to use besides from a Fetch polyfill, a polyfill for promises as well (see our post of 5 of the best Promises Polyfills for more information). If you already found a polyfill for the Promises API, then you will surely want to know which Fetch Polyfill is the best. In this article, we want to share with you 5 Polyfills for the API that will provide you with support for the API on older browsers.
5. Fetch Polyfill
The fetch polyfill by RubyLouvre which supports all mainstream browsers, even IE6, IE7 and IE8:
fetch('/users.json').then(function(response) {
return response.json()
}).then(function(json) {
console.log('parsed json', json)
}).catch(function(ex) {
console.log('parsing failed', ex)
});The Polyfill requires as well another polyfill for the Promises API included in the document.
4. Fetch ie8
This Polyfill is a window.fetch JavaScript polyfill supporting IE8. This fork supports IE8 with es5-shim, es5-sham and es6-promise. Fetch API is still very new and not fully supported in some browsers, so you may need to check browser verson as well as if window.fetch exists. In this case, you can set window.__disableNativeFetch = true to use AJAX polyfill always. The fetch function supports any HTTP method:
fetch('/users.html').then(function(response) {
return response.text()
}).then(function(body) {
document.body.innerHTML = body
})3. Unfetch
Unfetch is a tiny 500b fetch "barely-polyfill" with the following features and developed by developit:
- Tiny: under 500 bytes of ES3 gzipped
- Minimal: just
fetch()with headers and text/json responses - Familiar: a subset of the full API
- Supported: supports IE8+ (assuming
Promiseis polyfilled of course) - Standalone: one function, no dependencies
- Modern: written in ES2015, transpiled to 500b of old-school JS
While one of Unfetch's goals is to provide a familiar interface, its API may differ from other fetch polyfills/ponyfills. One of the key differences is that Unfetch focuses on implementing the fetch() API, while offering minimal (yet functional) support to the other sections of the Fetch spec, like the Headers class or the Response class.
2. Isomorphic Fetch
Isomorphic Fetch is a polyfill for the Fetch API for node and Browserify. Built on top of GitHub's WHATWG Fetch polyfill.
require('es6-promise').polyfill();
require('isomorphic-fetch');
fetch('//offline-news-api.herokuapp.com/stories').then(function(response) {
if (response.status >= 400) {
throw new Error("Bad response from server");
}
return response.json();
})
.then(function(stories) {
console.log(stories);
});1. Github Fetch (whatwg)
Everybody knows Github, however not everybody knows that Github has a repository in Github (mind explodes). One of the most known repositories from Github, is precisely a Polyfill for Fetch. The project implements a subset of the standard Fetch specification, enough to make fetch a viable replacement for most uses of XMLHttpRequest in traditional web applications. It supports the following browsers:
- Chrome
- Firefox
- Safari 6.1+
- Internet Explorer 10+
On modern browsers such as Chrome, Firefox, Microsoft Edge, and Safari contain native implementations of window.fetch, therefore the code from this polyfill doesn't have any effect on those browsers. If you believe you've encountered an error with how window.fetch is implemented in any of these browsers, you should file an issue with that browser vendor instead of this project. You will also need a Promise polyfill for older browsers.
Happy coding !
