AJAX、Fetch API 或通过浏览器的 GET 请求——文件下载应该使用哪种请求技术？答案

【问题标题】：AJAX, Fetch API, or GET-request via browser — which request technique should be used for a file download?AJAX、Fetch API 或通过浏览器的 GET 请求——文件下载应该使用哪种请求技术？
【发布时间】：2020-10-18 12:08:55
【问题描述】：

当我们谈论 JS 请求时，主要有三种技术：

AJAX (XMLHttpRequest/XHR, jQuery)
获取 API
GET-通过浏览器请求，例如：

const a = document.createElement("a");

a.href = `host?fileName=${fileName}`;

a.download = fileName;

a.click();*/

我的问题：

文件下载应该使用哪种请求技术——AJAX、Fetch API，或者将其委托给浏览器并触发GET-request？
如果 AJAX/Fetch API 是一种更可取的方法，那么与通过浏览器的标准 GET-request 相比，使用这种技术进行文件下载和上传场景的附加价值是什么？

附：最初，该线程包含相同类型的问题，但更加模糊和抽象。后来，我详细阐述了这些问题。为了保持这个线程干净，我隐藏了第一个版本的问题。

【问题讨论】：

什么是“同步查询”？你到底是什么意思？

标签： node.js ajax asynchronous download synchronous

【解决方案1】：

应该使用哪一个/是文件下载和上传场景的常见做法？

Ajax 和 Fetch 是两种不同的 API 理念，它们允许您做大部分相同的事情。 Fetch 是一种较新的设计，它并没有完全包含 XMLHttpRequest 的所有功能，但通常是一种更简洁的设计，因此这是我的选择。

“同步查询”的含义并不完全清楚。永远不要使用同步的XMLHttpRequest，因为它会在请求期间锁定浏览器。我不知道您的参考a.href = fileURL 是什么意思。如果您要分配<a> 标记的href 属性，那么所做的只是设置href 属性，因此如果将来的某个用户或代码激活该链接，那么网页将转到的URL 将是设置为某个值。没有什么同步的。

我看到您现在已经编辑了您的问题以包含a.click()。这与window.location = someFileURL 没有什么不同。这没有什么同步的。它会启动该 URL 的下载，并让用户根据响应标头中的内容来决定如何处理它。如果它具有某些标题（例如content-disposition），则可能会提示用户将下载保存为文件，而不是尝试在浏览器中显示它。这只是触发下载的一种方式。

在现代网络应用程序中使用同步查询（例如 a.href = fileURL）下载文件是一种常见的做法吗？

嗯，这不是同步操作，href 属性的分配不会导致任何文件下载，因此很难说出您的实际意思。你指的是表单帖子吗？

文件下载和上传场景使用AJAX/Fetch API有什么附加价值？

这些 API 允许您的 Javascript 控制事物。您的 Javascript 可以检索数据或发送数据，然后根据结果采取行动，所有这些都无需更改浏览器中的当前页面。您可以执行诸如获取数据以更新当前网页或在服务器上触发某些操作之类的操作 - 所有这些都无需更改当前网页。

当您希望结果返回到您的 Javascript 时，您可以使用 XMLHttpRequest 或 Fetch 操作，这样您就可以在您的 Javascript 中对该结果执行一些操作。当您希望浏览器完全自行处理结果时，您触发链接或设置window.location（根据响应的标题自行决定是显示内容还是提示用户保存在文件中） .

【讨论】：

@MikeB - 现在您已经澄清了一些问题，您的a.click() 场景没有任何“同步”，所以我不知道您为什么选择这个词。我在关于该选项的答案中添加了更多内容，但最终这只是触发可能下载的一种方式，在该下载中，使用来自服务器的正确标头，将提示用户将内容保存到文件中（或者在某些情况下，用户可能已将这种性质的预配置文件自动保存在已知目录中）。
我已经大大缩小了最初的问题，所以现在应该更具体了。
@MikeB。 - 所以，既然你已经改变了这么多问题，我应该删除我的答案吗？我回答了你最初问的问题。请试着让你的问题成为你下次从一开始就真正想问的问题。 Ajax 调用获取数据以供您的 Javascript 使用。触发链接为浏览器获取数据以决定如何处理它。当您想要一个与另一个时，情况完全不同。当您想为您的 Javascript 获取数据以执行某些操作时，请使用 Ajax 或 Fetch。当您希望浏览器决定如何处理时，请使用链接。
@MikeB。 - 好吧，我在我的回答中又添加了一段，我认为它触及了问题的核心。您要么希望 Javascript 中的结果，要么希望浏览器自行处理结果。任选其一。