Javascript 无法使用表单获取

我正在使用来发出一些请求并加载数据。 我做的第一个请求很好（注意页面加载时有一些封面），但是当我使用搜索按钮时，我得到

无法获取

。因为第一次有效，但不是在修改查询时，我认为我修改它的方式可能是错误的，但在仔细检查之后，我只修改了

变量。搜索
，然后我继续执行与第一次加载页面时相同的操作，所以我不知道为什么会失败。我还尝试在加载页面时修改第一个查询，它可以正常工作，因此我认为它与API无关

这是密码


constresultsel=document.getElementById（“容器结果”）；
const submitBtnEl=document.getElementById（“提交按钮”）；
const inputxtel=document.getElementById（“输入txt”）
变量查询=`
查询（$id:Int，$page:Int，$perPage:Int，$search:String）{
页码（页码：$页码，每页：$每页）{
页面信息{
全部的
当前页
最后一页
下一页
每页
}
媒体（id:$id，搜索：$search）{
身份证件
头衔{
罗马吉，
英语，
}
类型
封面图片{
大的
}
}
}
}
`;
变量变量={
搜索：“口袋妖怪”，
页码：1，
每页：5000
};
var url='1〕https://graphql.anilist.co',
选项={
方法：“POST”，
标题：{
“内容类型”：“应用程序/json”，
“接受”：“应用程序/json”，
},
正文：JSON.stringify({
查询：查询，
变量：变量
})
};
获取（url，选项）。然后（HandlerResponse）
.然后（handleData）
.接住（把手错误）；
功能句柄响应（响应）{
返回response.json（）.then（函数（json）{
return response.ok？json:Promise.reject（json）；
});
}
函数句柄数据（数据）{
过程数据（数据）；
}
函数句柄错误（错误）{
控制台错误（error）；
警报（“错误，检查控制台”）；
}
函数processData（数据）{
让processedData=[]；
queryResults=data.data.Page.media；
for（设i=0；i{
const userQuery=inputxtel.value；
if（userQuery！==“”）{
variables.search=userQuery；
options.body=JSON.stringify({
查询：查询，
变量：变量
})
获取（url，选项）。然后（HandlerResponse）
.然后（handleData）
.接住（把手错误）；
}
否则{
resultsEl.innerHTML=“”；
}
})
*{
框大小：边框框；
保证金：0；
填充：0；
背景色：黑色；
}
身体{
背景色：黑色；
}
.容器结果{
显示器：flex；
柔性包装：包装；
证明内容：中心；
}
.封面图片{
填充：.3em；
边缘：.1米；
宽度：300px；
颜色：白色；
}
img{
边缘：0.5em；
}
@介质（最小宽度：960像素）{
#纳尼{
宽度：500px；
}
}

使用api的示例
搜寻
Vishal是正确的。这是抛出一个错误，因为当他们提交时，您正在离开页面

将事件侦听器更改为这样启动，问题就会消失：

submitBtnEl.addEventListener("click", e => { 
   e.preventDefault();

当用户离开时，请求被中止，因此错误处理程序被触发

通过查看“网络”选项卡，您可以看到此操作（在如上所述修复之前）。请求显示“已取消”，即浏览器取消了请求

这里有点混乱，因为事件的顺序是：

用户单击提交按钮
您创建的事件侦听器将运行
在它内部，您的
获取
将激发，包括建立它的错误处理程序
当事件侦听器完成时，默认事件处理程序将运行。由于这是一个表单，并且按钮是“提交”类型，因此默认事件处理程序是提交表单。当没有给出操作URL时，它假定处理程序是同一个页面

浏览器开始导航（即提交）到同一页面的过程
浏览器取消
fetch
请求，因为用户正在“离开”当前页面
已取消的
fetch
请求现在已出错，因此错误处理程序将启动
您的
警报
在错误处理程序中运行，暂停页面的执行，包括导航
因此，此时他们似乎还没有导航，但流程已经启动到足以取消请求的程度。
尝试将提交按钮更改为键入按钮，或在提交表单时使用event.preventDefault（），即submitBtnEl.addEventListener（“单击”，（ev）=>{ev.preventDefault（）…这样，您可以在“网络”选项卡中看到更新的数据，而无需刷新整个页面，然后您需要使用新的结果集更新页面上的数据。@Vishal我也无法发现错误