Fetch API vs XMLHttpRequest

Я знаю, що Fetch API використовує Promises і обидва вони дозволяють робити запити AJAX до сервера.

Я читав, що API Fetch має деякі додаткові функції, які недоступні в XMLHttpRequest(і в поліфайлі Fetch API, оскільки він заснований XHR).

Які додаткові можливості має API Fetch?

Є кілька речей, які ви можете зробити із завантаженням, а не з XHR:

• Ви можете використовувати API кешу з об’єктами запиту та відповіді;
• Ви можете виконувати no-corsзапити, отримуючи відповідь від сервера, який не реалізує CORS. Ви не можете отримати доступ до тіла відповіді безпосередньо з JavaScript, але ви можете використовувати його з іншими API (наприклад, API кешу);
• Потокова відповідь (з XHR вся відповідь буферизована в пам'яті; за допомогою цього ви зможете отримати доступ до потоку низького рівня). Це ще не в усіх браузерах, але буде скоро.

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

• Відмовитись від запиту (це зараз працює у Firefox та Edge, як пояснює @sideshowbarker у своєму коментарі);
• Повідомте про хід.

Ця стаття https://jakearchibald.com/2015/thats-so-fetch/ містить більш детальний опис.

приносити

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

XHR

• немає способу не надсилати файли cookie (крім використання нестандартного 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) => { ... });