提取API与XMLHttpRequest

我知道Fetch API使用，Promise并且两者都允许您向服务器执行AJAX请求。

我已阅读到Fetch API具有一些额外的功能，这些功能在XMLHttpRequest（和Fetch API polyfill 中均不可用，因为它基于XHR）。

Fetch API有哪些额外功能？

您可以使用fetch而不是XHR进行以下操作：

• 您可以将Cache API与请求和响应对象一起使用；
• 您可以执行no-cors请求，并从未实现CORS的服务器获得响应。您不能直接从JavaScript访问响应主体，但可以将其与其他API（例如Cache API）一起使用；
• 流式响应（使用XHR，整个响应将被缓存在内存中，通过访存，您将能够访问低级流）。目前尚不能在所有浏览器中使用此功能，但很快就会发布。

您可以使用XHR进行一些尚无法使用的操作，但是迟早它们将可用（请在此处阅读“未来的改进”部分：https：//hacks.mozilla .org / 2015/03 / this-api-is-so-fetching /）：

• 中止请求（此操作现在在Firefox和Edge中有效，如@sideshowbarker在评论中所述）；
• 报告进度。

本文https://jakearchibald.com/2015/thats-so-fetch/包含更详细的描述。

取

• 缺少使用文档的内置方法
• 尚无法设置超时时间
• 无法覆盖内容类型响应标头
• 如果content-length响应标头存在但未公开，则在流式传输期间正文的总长度未知
• 即使请求已完成，也会调用信号的中止处理程序
• 没有上传进度（尚未ReadableStream提供支持实例的请求正文）

XHR

• 没有方法不发送cookie（除了使用非标准mozAnon标志或AnonXMLHttpRequest构造函数）
• 无法返回FormData实例
• 没有等效于fetch的no-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();

我们可以整理内容，并使用promise和现代语法编写更简洁易读的内容

fetch('./api/some.json')
    .then((response) => {
        response.json().then((data) => { 
            ... 
        });
    })
    .catch((err) => { ... });