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

AJAX, Fetch API, or GET-request via browser — which request technique should be used for a file download?

当我们谈论 JS 请求时,主要有以下三种技术:

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

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

a.download = fileName;

a.click();*/

我的问题:

  1. 文件下载应使用哪种请求技术 — AJAX、获取 API 或将其委托给浏览器并触发 GET-要求?

  2. 如果 AJAX/Fetch API 是一种更可取的方法,与标准 GET 相比,使用此技术进行文件下载和上传场景的附加值是什么?通过浏览器请求?


P.S。最初,该线程包含相同类型的问题,但更加模糊和抽象。后来,我详细说明了问题。为了保持这个帖子的整洁,我隐藏了第一个版本的问题。

Which one of them should be used / is a common practice for file download and upload scenarios?

Ajax 和 Fetch 是两种不同的 API 哲学,它们允许您做大致相同的事情。 Fetch 是一个更新得多的设计,不完全包含 XMLHttpRequest 的所有功能,但通常是一个更简洁的设计,所以这是我的选择。

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

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

Is it a common practice to use synchronous queries (e.g. a.href = fileURL) for a file downloading in a modern web app?

好吧,这不是同步操作,href 属性 的分配不会导致任何文件下载,因此很难说出您的实际意思。是吗,你的意思是 post?

What is an added value of using AJAX/Fetch API for file downloading and uploading scenarios?

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


当您希望结果返回到您的 Javascript 时,您可以使用 XMLHttpRequestFetch 操作,这样您就可以在 Javascript 中对该结果执行某些操作.当您希望浏览器完全自行处理结果时触发 link 或设置 window.location (自行决定是显示内容还是提示用户保存在文件中)响应的 headers)。