如何解决Chrome 出现弃用错误?从 API 端点获取数据不起作用
我目前正在使用 Github 的 API 构建一个搜索实用程序,该实用程序接受搜索查询(例如,名称“Brian”),验证输入,然后显示与查询相关的搜索结果列表。我的代码/逻辑看起来不错:
let searchBtn = document.getElementById('search-btn');
// function that takes user's input after a quick validation test
// returned value is the user's input,which is stored in the variable 'query'
let query = () => {
// validation code
let input = document.getElementById('search').value;
if(input.length < 3){
alert("Please enter more than two characters.");
}
return input;
}
searchBtn.addEventListener('click',query);
//function that retrieves data from API endpoint by concatenating API url with query variable
function getData(){
// template literal
fetch(`https://github.uconn.edu/api/v3/search/users?q=${query}`)
.then((response) => response.json())
.then(function(response){
console.log(response);
})
// catch is a callback function for when request fails
.catch(error => {
console.log(error);
})
}
searchBtn.addEventListener('click',getData);
但由于某种原因,我的 Chrome 控制台出现以下错误:
[弃用] 其 URL 中同时包含删除的空格(\n
、\r
、\t
)字符和小于字符(<
)的资源请求将被阻止。请从元素属性值等位置删除换行符并编码小于字符以加载这些资源。有关详情,请参阅 https://www.chromestatus.com/feature/5735596811091968。
我已经尝试使用 this link 中提到的 encodeURIComponent()
。网上似乎没有太多关于这个特定错误的信息,也没有解释它的含义。
指向我的项目的链接:https://github.uconn.edu/pages/ssw19002/dmd-3475/Week-10/github-search/github.html
解决方法
您不需要将这两个函数都添加为事件侦听器,因为其中一个函数不会被调用,也不会将输出分配给变量。另外,如果你只是将它定义为一个函数,你可以从另一个函数调用该函数,你可以将其添加为侦听器。
query()
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。