XMLHTTPRequest 错误:不推荐使用主线程上的同步 XMLHttpRequest ...(SoundCloud API)
Posted
技术标签:
【中文标题】XMLHTTPRequest 错误:不推荐使用主线程上的同步 XMLHttpRequest ...(SoundCloud API)【英文标题】:XMLHTTPRequest Error: Synchronous XMLHttpRequest on the main thread is deprecated ... (SoundCloud API) 【发布时间】:2018-09-09 15:58:55 【问题描述】:我正在使用 XMLHttpRequest 访问 SoundClouds 热门歌曲 (https://api-v2.soundcloud.com/charts?kind=trending&genre=soundcloud:genres:all-music&client_id=1dff55bf515582dc759594dac5ba46e9&q=)。我什至无法解析和所有有趣的东西,因为我的控制台记录了这个错误:
Synchronous XMLHttpRequest on the main thread is deprecated because of
its detrimental effects to the end user's experience. For more help
http://xhr.spec.whatwg.org/
我花了一些时间寻找答案,并且 - 据我所知 - 问题是请求中包含一些 javascript。所以我查看了 SoundCloud API 并在每个音轨的属性中发现了这一点:
... "waveform_url":"https://wis.sndcdn.com/2AVcYzUmENai_m.json" ...
因此,我发现的所有类似问题的解决方案都不起作用,因为我无法更改其 API 的工作方式。也许我做错了什么,你们可以帮忙。
这是导致问题的完整功能(我认为):
function initialSearch()
var xhr = new XMLHttpRequest();
xhr.open('GET', "https://api-v2.soundcloud.com/charts?kind=trending&genre=soundcloud:genres:all-music&client_id=1dff55bf515582dc759594dac5ba46e9&q=", false);
xhr.addEventListener("load", function()
initialArray = JSON.parse(xhr.response);
, false);
如果它有任何改变,我会在“DOMContentLoaded”上调用它。
也许你可以帮助我。谢谢。
【问题讨论】:
我的意思是...ajax 请求是同步的。通过将 false 更改为 true 使其异步。 有关此更改将导致的问题的帮助,请参阅此问题:***.com/questions/14220321/… 【参考方案1】:您使用 XMLHttpRequest 错误。做异步请求而不是同步。这是一个固定版本:
function initialSearch()
var xhr = new XMLHttpRequest();
xhr.addEventListener("load", function()
initialArray = JSON.parse(xhr.response);
, false);
xhr.open('GET', "https://api-v2.soundcloud.com/charts?kind=trending&genre=soundcloud:genres:all-music&client_id=1dff55bf515582dc759594dac5ba46e9&q=");
xhr.send();
但即便如此,您也会收到No 'Access-Control-Allow-Origin' header is present on the requested resource
错误。这是 CORS 浏览器策略错误。您只能向同源资源发出请求。
因此,如果您可以修改服务器代码,请从您的服务器执行该请求,并更改您的客户端 AJAX 请求以从您的服务器请求数据。
【讨论】:
感谢您的回答。我已经改变了我的功能,现在正在做一个回调等等。我仍然收到 CORS 浏览器策略错误。如您所述,我将如何更改请求?很抱歉打扰您... 完全不打扰。我知道如何做到这一点的唯一方法是在您的服务器上实现 soundcloud 请求作为端点。然后从你的 JS 你应该调用那个服务器端点。假设您在http://localhost:5000/index
上托管网站,那么您的端点将类似于http://localhost:5000/api/gettracks
。希望能给出这个想法。如果您评价我的回答,也将不胜感激。
addEventListener
比 onreadystatechange
好吗?
这是回复:***.com/questions/14946291/…以上是关于XMLHTTPRequest 错误:不推荐使用主线程上的同步 XMLHttpRequest ...(SoundCloud API)的主要内容,如果未能解决你的问题,请参考以下文章
Ajax POST - 不推荐用于同步请求的“XMLHttpRequest.withCredentials”
如何使用 XMLHttpRequest 捕获无效 URL 引发的错误