Fetch API 与 XMLHttpRequest

Question

我知道 Fetch API 使用

Promise

，它们都允许您向服务器发出 AJAX 请求。

我读到 Fetch API 有一些额外的功能，这些功能在

XMLHttpRequest

中不可用（以及 Fetch API polyfill，因为它基于

XHR

）。

Fetch API 有哪些额外功能？

Answer 1

有一些事情可以使用 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/包含更详细的描述。

Answer 2

取

缺少使用文档的内置方法
无法设置超时还
无法覆盖内容类型响应标头
如果内容长度响应标头存在但未暴露，则在流式传输期间正文的总长度未知
如果请求已完成，将调用信号的中止处理程序甚至
ReadableStream
```
实例作为请求主体
```
尚未到来）
不支持
--allow-file-access-from-files
（铬）

XHR

不发送cookie（除了使用非标准
mozAnon
```
标志
```
或
AnonXMLHttpRequest
```
构造函数）
```
FormData
```
 实例
```
fetch
```
 的 
```
no-cors
```
 模式
```

Answer 3

上面的答案很好，提供了很好的见解，但我与

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) => { ... });

Answer 4

根据规范，如果要获取的 URL 包含凭据，则 fetch 将抛出 TypeError。

这听起来可能可以忽略不计，因为可能会使用额外的“授权”标头。但是，如果页面内的 fetch 应加载与页面基本 url 相关的数据

如果该页面的 URL 本身具有凭据，则会出现问题。

XMLHttpRequest，另一方面，可以轻松加载所请求的资源，即使有凭据也是如此。

因此在这种情况下，页面的行为会发生变化，甚至导致错误——这是我们必须经历的惨痛教训。

Fetch API 与 XMLHttpRequest

问题描述投票：0回答：4

4个回答

取

最新问题

Fetch API 与 XMLHttpRequest

问题描述 投票：0回答：4

4个回答

取

最新问题

问题描述投票：0回答：4