获取API vs XMLHttpRequest

我知道Fetch API使用Promises，它们都允许你对服务器进行AJAX请求。

我读过Fetch API有一些额外的功能，这些功能在XMLHttpRequest中是不可用的(在Fetch API填充中也是不可用的，因为它基于XHR)。

Fetch API有什么额外的功能?

116258 次浏览
小开
最佳答案

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

  • 你可以在请求和响应对象中使用缓存API;
  • 你可以执行no-cors请求，从没有实现CORS的服务器获得响应。你不能直接从JavaScript访问响应体，但你可以使用它与其他API(例如缓存API);
  • 流响应(使用XHR，整个响应都缓冲在内存中，使用fetch，您将能够访问低级流)。目前还不能在所有浏览器中使用，但很快就会了。

你可以用XHR做一些你还不能用fetch做的事情，但它们迟早会可用(阅读这里的“未来改进”段落:https://hacks.mozilla.org/2015/03/this-api-is-so-fetching/):

  • 终止请求(这现在适用于Firefox和Edge， @sideshowbarker在他的评论中解释);
  • 报告的进展。

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

小开

获取

  • 缺少使用文档的内置方法
  • 没有办法设置超时然而,
  • 不能重写内容类型响应标头
  • 如果内容长度响应标头是但是没有暴露，则在流处理期间主体的总长度是未知的
  • 如果请求已经完成，将调用信号的中止处理程序甚至
  • 没有上传进度(支持ReadableStream实例作为请求体是尚未到来)
  • 不支持--allow-file-access-from-files(铬)

XHR

  • 没有办法不发送cookie(除了使用非标准的mozAnon标志或AnonXMLHttpRequest构造函数)
  • 不能返回FormData实例
  • 没有与fetch的no-cors模式等价的对象
  • 始终遵循重定向
小开

上面的答案很好，提供了很好的见解，但我和这个谷歌开发者博客条目分享了同样的观点，主要的区别(从实际的角度来看)是从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) => { ... });

提交答案