JavaScript console.log导致错误:“主线程上的同步XMLHttpRequest已弃用……”

我一直在向控制台添加日志，以检查不同变量的状态，而不使用Firefox调试器。

然而，在我在main.js文件中添加console.log的许多地方，我收到了以下错误，而不是我给自己的可爱的手写消息:

主线程上的同步XMLHttpRequest已弃用，因为它会对最终用户的体验产生不利影响。为了获得更多帮助http://xhr.spec.whatwg.org/

我可以在我的代码使用中添加哪些console.log的替代品或包装器而不会导致此错误?

我“做错了”吗?

802224 次浏览
小开

警告消息可能是由于主线程中的XMLHttpRequest请求将async标志设置为false。

https://xhr.spec.whatwg.org/#synchronous-flag:

同步工作者外部的XMLHttpRequest正在处理中 从网络平台删除，因为它有有害的影响 终端用户的体验。(这是一个需要很多人参与的漫长过程 年。)时，开发人员不能为async参数传递false JavaScript全局环境是一个文档环境。用户代理 强烈建议在开发人员工具中警告此类使用 并且可以尝试抛出InvalidAccessError异常 它发生。< / p >

未来的方向是只允许工作线程中的xmlhttprequest。这条消息意在发出这方面的警告。

小开

这种情况发生在我很懒的时候，我将脚本标记作为返回内容的一部分。是这样的:

部分HTML内容:

<div>
SOME CONTENT HERE
</div>
<script src="/scripts/script.js"></script>

至少在我的例子中，如果通过xhr返回这样的HTML内容，就会导致jQuery调用该脚本。该调用带有一个async标志false，因为它假定您需要继续加载脚本。

在这种情况下，最好查看某种类型的绑定框架并返回一个JSON对象，或者根据后端和模板更改加载脚本的方式。

你也可以使用jQuery的getScript()来获取相关的脚本。这是一个小提琴，这只是一个直接复制的jQuery示例，但我没有看到任何警告抛出时，脚本加载的方式。

例子

<script>
var url = "/scripts/script.js";
$.getScript(url);
</script>

http://jsfiddle.net/49tkL0qd/

小开

我也面临着同样的问题，但能够通过放置async: true来修复它。我知道它默认为true，但当我显式地写它时，它是有效的

$.ajax({
async: true,   // this will solve the problem
type: "POST",
url: "/Page/Method",
contentType: "application/json",
data: JSON.stringify({ ParameterName: paramValue }),
});
小开

我得到这个异常时，我设置url在查询像“example.com/files/text.txt”。我把url改为“http://example.com/files/text.txt”，这个异常消失了。

小开

在我的情况下，这是由flexie脚本引起的，它是Cloudflare提供的“CDNJS选择”应用程序的一部分。

根据Cloudflare的说法，“该应用程序已于2015年3月弃用”。我把手机关掉，留言立刻就消失了。

你可以通过访问https://www.cloudflare.com/a/cloudflare-apps/yourdomain.com访问这些应用程序

注意:这是我在这个线程同步XMLHttpRequest警告和<script>上的答案的副本(我在寻找解决方案时访问了两者)

小开

我得到了这个例外，包括一个can.js脚本在另一个，例如，

\{\{>anotherScript}}
小开

我在以下情况下得到这样的警告:

1)包含<script type="text/javascript" src="/javascript/jquery-1.10.2.js"></script>的file1。页面有输入字段。我在输入字段中输入一些值，然后点击按钮。Jquery向外部php文件发送输入。

2)外部php文件也包含jquery和在外部php文件我还包括<script type="text/javascript" src="/javascript/jquery-1.10.2.js"></script>。因为如果这样我就会收到警告。

从外部php文件中删除了<script type="text/javascript" src="/javascript/jquery-1.10.2.js"></script>，并且没有警告。

正如我所理解的加载第一个文件(file1)，我加载jquery-1.10.2.js和作为页面不重新加载(它发送数据到外部php文件使用jquery $.post)，然后jquery-1.10.2.js继续存在。所以不需要再加载了。

小开

在MVC应用程序中，我得到了这个警告，因为我用一个返回View()而不是PartialView()的方法打开了一个Kendo窗口。View()试图再次检索页面的所有脚本。

小开
我在《ZF2》中也遇到过这种情况。 我试图加载模式内容，但我忘记禁用布局之前

所以:

$viewModel = new ViewModel();
$viewModel->setTerminal(true);
return $viewModel;
小开

有时候ajax加载一个脚本是必要的，但是将文件准备好了延迟到脚本加载之后。

jQuery通过holdReady()函数支持这一点。

使用示例:

$.holdReady(true);                              //set hold
function releaseHold() { $.holdReady(false); }  //callback to release hold
$.getScript('script.js', releaseHold);          //load script then release hold

实际的脚本加载是异步的(没有错误)，但如果JavaScript的其余部分在文件准备好了之后运行，则效果是同步的。

这个高级功能通常由动态脚本使用 加载器，想要加载额外的JavaScript，如jQuery插件 在允许就绪事件发生之前，即使DOM可能发生 准备好。< / p >
< br > < p >文档: https://api.jquery.com/jquery.holdready
< br >

2019年1月7日更新

从JQMIGRATE:

jQuery.holdReady()已弃用

jQuery.holdReady()方法已弃用，因为它对页面的全局性能有不利影响。此方法可以防止页面上的所有代码在较长时间内初始化。

解决方案:重写页面，使它不需要所有jQuery ready处理程序被延迟。例如，可以通过在安全运行时仅延迟加载需要延迟的代码来实现这一点。由于此方法的复杂性，jQuery Migrate不会尝试填充该功能。如果与jQuery Migrate一起使用的jQuery底层版本不再包含jQuery.holdReady()，则在此警告出现后不久，代码将失败。

小开

我一直在看答案，都令人印象深刻。我认为他应该提供给他一个问题的代码。给出下面的例子，如果你在page.php中有一个链接到jquery的脚本，你就会得到通知。

$().ready(function () {
$.ajax({url: "page.php",
type: 'GET',
success: function (result) {
$("#page").html(result);
}});
});
小开

我用以下步骤来解决这个问题:

  1. 检查您的CDN脚本并在本地添加它们。
  2. 将脚本包含移动到标题部分。
小开

像@Nycen一样，我也得到了这个错误，因为一个链接到Cloudfare。我的是Select2插件。

我刚把它拆了

 src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"

错误消失了。

小开
  1. 在Chrome中，press F12
  2. 开发工具->按F1。
  3. 参见设置->general-> appearance: "Don't show chrome Data Saver warning"-设置此复选框。
  4. 参见设置->general->Console: "Log XMLHTTPRequest" -设置此复选框。

享受

小开

@ webgr部分回答实际上帮助我调试了这个警告@控制台日志，遗憾的是，答案的另一部分带来了这么多的反对票:(

不管怎样，下面是我发现这个警告的原因:

  1. 使用Chrome浏览器>按F12打开DevTools
  2. 打开抽屉里的菜单(在Chrome 3中右上方的垂直点)
  3. 在控制台 >下检查日志xmlhttprequest选项
  4. 重新加载给您错误的页面，并观察控制台日志中的每个ajax请求发生了什么。

在我的例子中，另一个插件在每次ajax调用后加载2 . js库，这是绝对不需要也没有必要的。禁用流氓插件从日志中删除了警告。从这一点上，你可以尝试自己解决这个问题(例如，限制脚本的加载到某些页面或事件-这是一个太具体的答案)或联系第三方插件开发人员来解决它。

希望这能帮助到一些人。

小开

Visual Studio 2015/2017的实时调试器正在注入包含弃用调用的代码。

小开

为避免此警告，请不要使用:

async: false

在任何$.ajax()调用中。这是XMLHttpRequest唯一被弃用的特性。

默认为

async: true

jQuery已弃用同步XMLHTTPRequest

小开

在我的特殊情况下，我正在渲染一个没有render layout: false的Rails部分，它正在重新渲染整个布局，包括<head>标记中的所有脚本。将render layout: false添加到控制器动作中解决了这个问题。

小开

这个问题在我的案例中得到了解决。

JS

$.ajaxPrefilter(function( options, original_Options, jqXHR ) {
options.async = true;
});

这个答案被插入到这个链接中

< a href = " https://stackoverflow.com/questions/28322636/synchronous-xmlhttprequest-warning-and-script " > <强> https://stackoverflow.com/questions/28322636/synchronous-xmlhttprequest-warning-and-script < /强> < / >

小开

对我来说，问题是在一个OK请求中，我期望ajax响应是一个格式良好的HTML字符串，如表格，但在这种情况下，服务器正在经历请求的问题，重定向到错误页面，因此返回错误页面的HTML代码(在某处有<script标记)。我控制台记录了ajax响应，这时我意识到它不是我所期望的，然后继续进行调试。

小开

这个问题是2014年提出的，现在是2019年，所以我想寻找更好的选择是件好事。

你可以简单地在Javascript中使用fetch api，它为你提供了更多的灵活性。

例如，请参阅此代码

fetch('./api/some.json')
.then((response) => {
response.json().then((data) => {
...
});
})
.catch((err) => { ... });
小开

我发现这些问题导致早期重定向页面之前javascript完成，在我的情况下，firebase rtdb设置功能。


提交答案