Api PUT 请求显示为“已取消”，并显示错误消息“TypeError：无法获取”

Question

这是一个奇怪的情况，我看过很多这样的问题，但没有什么比这更好的了。希望我能得到一些关于它的反馈

我正在现有应用程序中创建一个新网页，并尝试执行一个简单的PUTapi 调用，由于某种原因，它在 chrome 开发工具中的网络选项卡上显示状态cancelled。我正在访问的服务器是我本地计算机上的虚拟机。我可以从应用程序中的不同现有页面访问相同的端点，并且它运行得很好，所以我知道端点没有任何问题。这是一些屏幕截图：

Chrome 开发工具中的网络选项卡如下所示：

这是当我点击“已取消”看跌期权时看到的内容：

这是 Chrome 开发工具的控制台选项卡上显示的内容：

需要注意的一件事是，在General右侧部分下的第二个屏幕截图中，没有列出Request Method、 Status Code或 的任何内容Remote Address，请参阅我之前提到的成功 api put 请求的屏幕截图以供参考：

真正奇怪的是，我的数据库正在使用更新的数据进行更新，因此在某种程度上，即使显示PUT为已取消，它也在某种程度上起作用。

该调用源自我页面上的 vue 组件，如果这很重要的话，我的后端是 PHP 的。

这是我的 .js 文件中执行以下操作的调用PUT：

return await SimpleService.put(`${app.API_URL}/matching/questions/${borrowerId}`,
    JSON.stringify(answerData), {contentType: 'application/json'})

因此，我认识到，如果没有看到附加的所有代码，要求一个黑白分明的答案是不太现实的，但如果有人甚至可以给我一些要检查的想法，我将不胜感激。

我试图包含我能想到的所有内容，而不包含不必要的内容，但如果需要我提供任何其他信息来解决此问题，请告诉我。

Answer 1

菲尔的评论是正确的，这是我的理解的解释。当单击提交 api 调用的按钮时，将执行按钮单击的默认行为，即重新加载页面。好吧，当页面重新加载时，任何正在进行的网络请求都不再被跟踪，这就是为什么请求在我的控制台选项卡中显示为“已取消”。这也解释了为什么 api 调用能够成功更新数据库，因为实际请求没有任何问题。以下是我为解决问题所采取的步骤：

1. 从我的按钮中删除onClick正在调用开始 api 调用过程的 javascript 函数的事件
2. 将此代码添加到我的按钮所在的表单标签中：@submit.prevent="myJavascriptFunctionThatStartsAPICall()"

添加.prevent可防止发生页面重新加载的默认行为，因此当响应返回到页面时，页面仍在侦听它。问题解决了。

我希望这可以帮助其他人。