此问题已在此处有答案:
try..catch not catching async/await errors(1个答案)
Fetch API error handling(3个答案)
How to handle HTTP code 4xx responses in fetch api(4个答案)
昨天关门了。
我正在学习JavaScript API项目,fetch,then,catch。我用YouTube JavaScript API项目编写了代码。每次我尝试它,'捕捉'是不工作。
let searchBtn=document.getElementById("search-btn");
let countryInp=document.getElementById("country-inp");
searchBtn.addEventListener("click", ()=>{
let countryName=countryInp.value;
let finalURL=`https://restcountries.com/v3.1/name/${countryName}?fullText=true`;
console.log(finalURL);
fetch(finalURL)
.then((response)=>response.json())
.then(data=>{
console.log(data[0]);
console.log(data[0].capital[0]);
console.log(data[0].flags.svg);
console.log(data[0].name.common);
console.log(data[0].continents[0]);
console.log(Object.keys(data[0].currencies)[0]);
})
.catch(()=>{
if(countryName.lengh==0){
result.innerHTML=`<h3>The input field cannot be empty</h3>`;
}
else{
result.innerHTML=`<h3>Please enter a valid country name.</h3>`;
}
});
});
<button id="search-btn">Search</button>
<input id="country-inp" value="United Kingdom"></input>
consol box是这么说的script.js:7 GET https://restcountries.com/v3.1/name/?fullText=true 404(Not Found)(匿名)@ script.js:7
我尽力了.catch(error => console.log(error))
但效果并不好
2条答案
按热度按时间iyfjxgzm1#
正如我在你的代码中清楚地看到的,问题是由“countryName”变量是空的“”引起的,只要检查你的countryInp是否给出了一个值。或者,您可以暂时先将countryName变量硬编码为任何国家名称
正如我所检查的,你的API工作正常。
还有一件事,你可以在调用API之前在回调函数中检查countryName.length。
esbemjvw2#
首先,要小心,因为你有一个错字在
如果控制台显示404,可能是API不工作,或者您无法向其发送请求。
请注意,因为**'result'(DOM中的元素)没有在您提供的代码中声明,请注意javascript中的'scopes'(您可以在https://developer.mozilla.org/en-US/docs/Glossary/Scope中看到这一点)。
我建议您以不同的方式处理错误。您可以创建另一个文件,并创建一个错误对象**来处理错误。(参见https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#utilizing_error_objects中的文档)