Fetch API和XMLHttpRequest有什么区别？

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执行一些使用fetch无法完成的操作,但它们迟早会可用(请阅读"未来改进"段落:https://hacks.mozilla .org/2015/03/this-api-is-so-fetching /):

• 中止请求(现在可以在Firefox和Edge中使用,正如@sideshowbarker在他的评论中解释的那样);
• 报告进度.

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

Answer 2

取

• 缺少使用内置方法来使用文档
• 没有办法设置超时还
• 无法覆盖内容类型响应标头
• 如果内容长度响应头存在但未暴露,则在流式传输期间,主体的总长度是未知的
• 即使请求已经完成,也会调用信号的中止处理程序

XHR

• 除了使用非标准标志或构造函数之外,没有办法不发送cookiemozAnonAnonXMLHttpRequest
• 无法返回FormData实例
• 没有相当于fetch的no-cors模式
• 总是遵循重定向

Answer 3

上面的答案很好,并提供了很好的见解,但我在谷歌开发者博客条目中分享了相同的意见,主要区别(从实际角度来看)是从内部承诺返回的便利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) => { ... });