Получить API против XMLHttpRequest

Я знаю, что Fetch API использует Promises, и оба они позволяют вам делать AJAX-запросы к серверу.

Я читал, что Fetch API имеет некоторые дополнительные функции, которые недоступны XMLHttpRequest(и в полизаполнении Fetch API, так как он основан на XHR).

Какие дополнительные возможности есть в Fetch API?

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

• Вы можете использовать Cache API с объектами запроса и ответа;
• Вы можете выполнять no-corsзапросы, получая ответ от сервера, который не поддерживает CORS. Вы не можете получить доступ к телу ответа напрямую из JavaScript, но вы можете использовать его с другими API (например, Cache API);
• Потоковые ответы (с помощью XHR весь ответ буферизируется в памяти, с помощью fetch вы сможете получить доступ к низкоуровневому потоку). Это доступно не во всех браузерах, но скоро будет.

С XHR вы можете сделать несколько вещей, которые вы еще не можете сделать с fetch, но они будут доступны рано или поздно (см. Параграф «Будущие улучшения» здесь: https: //hacks.mozilla .org / 2015/03 / это-то-то-самое-приятное / ):

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

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

получать

• отсутствует встроенный метод для использования документов
• нет возможности установить тайм - аут еще
• не может переопределить заголовок ответа типа содержимого
• если заголовок ответа на длину содержимого присутствует, но не доступен , общая длина тела неизвестна во время потоковой передачи
• вызовет обработчик прерывания сигнала, даже если запрос был выполнен
• нет прогресса загрузки (поддержка ReadableStreamэкземпляров, так как тела запросов еще впереди )

XHR

• нет способа не отправлять куки (кроме использования нестандартного mozAnonфлага или AnonXMLHttpRequestконструктора)
• не может вернуть FormDataэкземпляры
• не имеет эквивалента для режима fetchsno-cors
• всегда следовать перенаправлениям

Приведенные выше ответы являются хорошими и дают хорошее представление, но я разделяю то же мнение, что и в этой записи блога разработчиков 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) => { ... });