【问题标题】：Can you add priorities to AJAX calls您可以为 AJAX 调用添加优先级吗
【发布时间】：2023-04-05 04:54:02
【问题描述】：

我正在创建一些使用 ajax 来获取页面信息的插件。现在有不同的插件执行不同的功能。

所有插件都需要单独使用，但我还想添加它们可以很好地协同工作的功能。

所有不同的插件都有自己的 JavaScript 文件和函数。这对于 HTTP 请求来说是没有问题的，因为大多数人都有插件可以在网站部署时将所有文件合并为一个。

现在回答我的问题。正如我所说，不同的插件获取网站的不同部分。例如，帖子计数、用户推文、用户统计信息、帖子 cmets。

现在我可以指定从网站调用此信息的优先级。我认为我不能将它们全部合并到一个 ajax 调用中，因为它们都是单独的工作组件。

任何人都知道一个很好的解决方案，我如何指定首先获取 cmets，然后是统计数据等。

我选择的 JS 框架是 jQuery。

【问题讨论】：

必须在ajax请求中使用回调函数

标签： javascript jquery ajax

【解决方案1】：

一种通用方法是为挂起的 AJAX 调用实现优先级队列。每个插件都会将他们的调用放在队列中，并在调用上具有相关的优先级，并且 AJAX 队列处理器将按优先级顺序在队列中工作。

这是一个 jQuery 优先队列插件的例子：

http://benalman.com/code/projects/jquery-message-queuing/docs/files/jquery-ba-jqmq-js.html

另外，这里已经为 AJAX 请求实现了一个：

Sequencing ajax requests

【讨论】：

谢谢，我会通过链接阅读。我已经在考虑队列了，但我认为实现中存在问题。正如我所说，所有插件都可以单独运行。现在我应该在哪里定义队列。我无法在我认为的所有插件中实现它们。我也不能只把队列放在一个。
@SaifBechan 有两件事浮现在脑海中，可能是：1) 要求插件的用户首先安装新的 AJAX 优先级队列插件；-) 或 2) 在每个文件中定义队列功能（你我想自动化它，natch），并测试它是否已经创建。
好的，我现在正在研究第二个选项，关于可以使用哪种队列的任何建议？我真的不想强迫人们使用“包装器”。如果没有其他选择，我会这样做，但我希望有其他选择。谢谢。
@SaifBechan 查看已经实现的“sequencing ajax requests”链接。
好的，我认为可以。也许我会创建两个版本的插件，一个带有普通 ajax 调用的独立版本。还有一个带有组合插件的版本。它只需要一些小的改动，一个会有一个队列，另一个没有。之前和之后的逻辑保持不变。

【解决方案2】：

2020 年更新

priority hints are on hold for now

2018年答案

仍然无法为 XMLHttpRequest 或 window.fetch 调用设置明确的优先级，但有一个由 Google 推动的名为“优先级提示”的新 API 提案。

https://wicg.github.io/priority-hints/#examples

目前它不被任何浏览器支持； Chrome 70 has shipped an experimental implementation behind the flag.

减少来自非关键 Fetch API 请求的网络争用

Priority Hints 可用于降低非关键 Fetch 的优先级 API 请求，以避免它们与更重要的请求竞争。

新闻网站对文章内容提出关键的 Fetch API 请求最终可能会与对不太重要的资源的请求进行竞争喜欢相关内容。
<script>
 // Critical Fetch request for article content 
 fetch('/api/articles.json').then(/*...*/)

 // Request for related content contending with the above request 
 fetch('/api/related.json').then(/*...*/)
</script>
通过在第二个 Fetch 请求中使用重要性属性，我们可以暗示该请求的优先级较低，从而减少了它与获取文章内容的请求竞争。我们还可以明确声明第一个请求的优先级很高，以便 Fetch 请求还没有高优先级的浏览器知道它对页面很重要。
<script>
 // Critical Fetch request for article content 
 fetch('/api/articles.json', { importance: 'high' }).then(/*...*/)
 
 // Request for related content now reduced in priority
 // reducing the opportunity for contention
 fetch('/api/related.json', { importance: 'low' }).then(/*...*/)
</script>

【讨论】：