我知道 Fetch API 使用Promises 并且它们都允许您向服务器发出 AJAX 请求。
我已经读到 Fetch API 有一些额外的功能，这些功能在XMLHttpRequest（和 Fetch API polyfill中不可用，因为它基于XHR）。
Fetch API 有哪些额外的功能？
获取 API 与 XMLHttpRequest
IT技术
javascript
ajax
xmlhttprequest
fetch-api
2021-02-16 22:15:59
3个回答
你可以用 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/包含更详细的描述。
拿来
- 缺少使用文档的内置方法
- 没有办法设置超时还
- 无法覆盖内容类型响应标头
- 如果 content-length 响应头存在但未公开，则在流传输期间主体的总长度未知
- 即使请求已完成，也会调用信号的中止处理程序
- 没有上传进度（对
ReadableStream请求主体的支持尚未到来）
XHR
- 没有办法不发送 cookie（除了使用非标准
mozAnon标志或AnonXMLHttpRequest构造函数） - 无法返回
FormData实例 - 没有等效于
fetch的no-cors模式 - 始终遵循重定向
上面的答案很好，提供了很好的见解，但我与谷歌开发者博客文章中的观点相同，主要区别（从实际角度来看）是从返回的内置Promise的便利性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) => { ... });