237

我知道 Fetch API 使用Promises 并且它们都允许您向服务器执行 AJAX 请求。

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

Fetch API 有哪些额外的功能？

4

3 回答 3

161

您可以使用 fetch 而不是 XHR 来做一些事情：

  • 您可以将 Cache API 与请求和响应对象一起使用；
  • 您可以执行no-cors请求，从未实现 CORS 的服务器获取响应。您不能直接从 JavaScript 访问响应正文，但您可以将其与其他 API（例如 Cache 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/包含更详细的描述。

于 2016-02-22T11:26:59.247 回答
85

拿来

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

XHR

  • 没有办法不发送 cookie（除了使用非标准mozAnon标志或AnonXMLHttpRequest构造函数）
  • 无法返回FormData实例
  • 没有等价于fetch'no-cors模式
  • 始终遵循重定向
于 2016-11-29T23:58:13.903 回答
17

上面的答案很好并且提供了很好的见解，但我与这个谷歌开发者博客条目中分享的观点相同，主要区别（从实际角度来看）是从返回的内置承诺的便利性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) => { ... });
于 2018-03-20T02:27:51.887 回答