Топ 5: Лучшие JavaScript-полифилы для Fetch API

Fetch API широко известен тем, что он намного чище, чем XMLHttpRequest, теоретически проще в использовании и, очевидно, API, который доступен не во всех браузерах. По данным Google:

Основное различие заключается в том, что Fetch API использует Promises, что позволяет использовать более простой и понятный API, избегая ада обратного вызова и запоминания сложного API XMLHttpRequest. [Узнайте больше в разделе Введение в fetch ()]

Этот API доступен начиная с Chrome 42. Одной из проблем этого API является то, что он также использует API, который не поддерживается ни во всех браузерах (обещаниях), поэтому вам нужно будет использовать помимо полифилла Fetch, полифилл и для обещаний (см. наш пост 5 из лучших обещаний Polyfills для получения дополнительной информации). Если вы уже нашли полифил для API-интерфейса Promises, вам наверняка захочется узнать, какой Fetch Polyfill является лучшим. В этой статье мы хотим поделиться с вами 5 Polyfills для API, который предоставит вам поддержку API в старых браузерах.

5. Получить Polyfill

Получить polyfill по RubyLouvre который поддерживает все основные браузеры, даже IE6, IE7 и 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)
});

Для Polyfill требуется также еще один Polyfill для API Promises, включенного в документ.

4. Получить ie8

Этот Polyfill является window.fetch JavaScript-полифилл с поддержкой IE8. Эта вилка поддерживает IE8 с es5-shim, es5-sham и es6-promise. Fetch API все еще очень новый и не полностью поддерживается в некоторых браузерах, поэтому вам может потребоваться проверить версию браузера, а также наличие window.fetch. В этом случае вы можете установить window.__disableNativeFetch = true использовать AJAX polyfill всегда. Функция fetch поддерживает любой метод HTTP:

fetch('/users.html').then(function(response) {
return response.text()
}).then(function(body) {
document.body.innerHTML = body
})

3. Unfetch

Unfetch — это крошечный 500-битный «едва-многофилловый» со следующими функциями, разработанный developit:

• Крошечный: под 500 байтов из ES3 сжат GZIP
• Минимальные: просто fetch() с заголовками и ответами text / json
• Знакомый: подмножество полного API
• Поддерживается: поддерживает IE8 + (при условии Promise Поли заполнен конечно)
• Standalone: одна функция, без зависимостей
• Современный: написано в ES2015, перенесено в 500b JS старой школы

В то время как одна из целей Unfetch — предоставить знакомый интерфейс, его API может отличаться от других извлекаемых polyfills / ponyfills. Одно из ключевых отличий заключается в том, что Unfetch фокусируется на реализации API fetch (), предлагая минимальную (но функциональную) поддержку другим разделам спецификации Fetch, таким как класс Headers или класс Response.

2. Изоморфная выборка

Isomorphic Fetch — это полизаполнение для Fetch API для узла и Browserify. Построен на вершине 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)

Все знают Github, однако не все знают, что у Github есть хранилище в Github (ум взрывается). Одним из самых известных репозиториев от Github, является именно Polyfill для Fetch. Проект реализует подмножество стандартной спецификации Fetch, достаточное для того, чтобы сделать выборку жизнеспособной заменой для большинства применений XMLHttpRequest в традиционных веб-приложениях. Поддерживаются следующие браузеры:

• Хром
• Fire Fox
• Safari 6.1+
• Internet Explorer 10+

В современных браузерах, таких как Chrome, Firefox, Microsoft Edge и Safari, есть встроенные реализации window.fetchпоэтому код из этого полифилла не влияет на эти браузеры. Если вы считаете, что столкнулись с ошибкой window.fetch реализован в любом из этих браузеров, вы должны подать проблему с этим поставщиком браузера вместо этого проекта. Вам также понадобится полифил Promise для старых браузеров.