Chrome 出现弃用错误？从 API 端点获取数据不起作用

编程问答 2022-05-16

问题描述

我目前正在使用 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()
ajaxasynchronousfetchfetchfetchjavajavaxmlhttprequestxmlhttprequest