Question

我知道fetch正在使用promises，它们都允许你向服务器发出AJAX请求。我已经读过fetch有一些额外的功能，这些功能在XMLHttpRequest中是不可用的（并且在fetch polyfill中，因为它基于XHR）。 fetch API有哪些额外功能？

Answer 1

你可以用fetch做一些事情而不用XHR：

您可以将Cache API与请求和响应对象一起使用;
您可以执行no-cors个请求，从未实施CORS的服务器获取响应。您无法直接从JavaScript访问响应正文，但您可以将其与其他API（例如Cache API）一起使用;
流式响应（使用XHR，整个响应在内存中缓冲，通过提取，您将能够访问低级别流）。这在所有浏览器中都不可用，但很快就会推出。

您可以使用XHR做一些事情，但您不能使用提取，但它们迟早会被提供（请阅读＆＃34;未来的改进＆＃ 34;段落：https://hacks.mozilla.org/2015/03/this-api-is-so-fetching/）：

中止请求（现在可以在Firefox和Edge中使用，正如@sideshowbarker在他的评论中解释的那样）;
报告进度。

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

Answer 2

取

缺少使用内置方法来使用文档
无法设置超时yet
无法覆盖内容类型响应标头
如果内容长度响应标头存在但未公开，则在流式传输期间主体的总长度未知
将调用信号的中止处理程序甚至

XHR

没有不发送Cookie（除了使用non-standard mozAnon flag或AnonXMLHttpRequest构造函数之外）

无法返回FormData个实例

没有等同于fetch的{{1}}模式

始终遵循重定向

Answer 3

上面的答案很好并且提供了很好的见解，但我在这个google developers blog entry中分享了相同的观点，因为主要区别（从实际的角度来看）是从内容中返回的内在承诺的便利性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) => { ... });

Fetch API和XMLHttpRequest有什么区别？

3 个答案:

取

XHR