В чем разница между API Fetch и XMLHttpRequest?

Question

В чем разница между API Fetch и XMLHttpRequest?

Я знаю, что fetch использует обещания, и оба они позволяют выполнять AJAX-запросы к серверу. Я читал, что fetch имеет некоторые дополнительные функции, которые недоступны в XMLHttpRequest (и в fetch polyfill, так как он основан на XHR).
Какими дополнительными возможностями обладает API fetch?

1401 3

javascript ajax xmlhttprequest fetch-api

3 ответов:

Comments

Ничего не найдено.

Marco · Accepted Answer · 2017-12-12 23:43:39

Есть несколько вещей, которые вы можете сделать с fetch, а не с XHR:

Вы можете использовать API кэша с объектами запроса и ответа;

Вы можете выполнять запросы no-cors, получая ответ от сервера, который не реализует CORS. Вы не можете получить доступ к телу ответа непосредственно из JavaScript, но вы можете использовать его с другими API (например, Cache API);

потоковые ответы (с XHR весь ответ буферизуется в памяти, с fetch вы сможете доступ к потоку низкого уровня). Это еще не доступно во всех браузерах, но скоро будет доступно.

Есть пара вещей, которые вы можете сделать с помощью XHR, которые вы пока не можете сделать с помощью fetch, но они будут доступны рано или поздно (читайте пункт "будущие улучшения" здесь: https://hacks.mozilla.org/2015/03/this-api-is-so-fetching/):

прервать запрос (теперь это работает в Firefox и Edge, как объясняет @sideshowbarker в своем комментарии);

отчет прогресс.

Эта статья https://jakearchibald.com/2015/thats-so-fetch/ содержит более подробное описание.

Knu · Accepted Answer · 2018-09-13 22:10:27

Fetch

отсутствует встроенный метод для использования документов

нет способа установить тайм-аут пока

не удается переопределить заголовок ответа типа содержимого

Если заголовок ответа content-length присутствует , но не представлен , общая длина тела неизвестна во время потоковой передачи

вызовет обработчик прерывания сигнала даже , если запрос был завершен

XHR

нет никакого способа не отправка файлов cookie (кроме использования нестандартного mozAnon флага или конструктора AnonXMLHttpRequest)

не удается вернуть FormData экземпляры

не имеет эквивалента fetch'S no-cors mode

Всегда следуйте перенаправлениям

Felipe · Accepted Answer · 2018-03-20 04:27:51

Ответы выше хороши и дают хорошие идеи, но я разделяю то же мнение, что и в этой записи в блоге разработчиков google, в том, что основное отличие (с практической точки зрения) заключается в удобстве встроенного обещания, возвращенного из fetch

Вместо того, чтобы писать такой код
function reqListener() {
    var data = JSON.parse(this.responseText);
}

function reqError(err) { ... }

var oReq = new XMLHttpRequest();
oReq.onload = reqListener;
oReq.onerror = reqError;
oReq.open('get', './api/some.json', true);
oReq.send();
Мы можем навести порядок и написать что-нибудь более лаконичное и читабельное с обещаниями и современным синтаксисом
fetch('./api/some.json')
    .then((response) => {
        response.json().then((data) => { 
            ... 
        });
    })
    .catch((err) => { ... });