这是一个奇怪的情况，我看过很多这样的问题，但没有什么比这更好的了。希望我能得到一些反馈
我正在现有应用程序中创建一个新网页，并尝试执行一个简单的 PUT API 调用，但由于某种原因，它显示已取消 状态在 Chrome 开发工具的网络选项卡上。我正在访问的服务器是我本地计算机上的虚拟机。我可以从应用程序中的不同现有页面访问相同的端点，并且它运行得很好，所以我知道端点没有任何问题。以下是一些屏幕截图:
这就是 Chrome 开发工具中的网络选项卡的样子:
这是我点击“已取消”看跌期权时看到的内容:
这是 Chrome 开发工具的控制台选项卡上显示的内容:
需要注意的一点是，在右侧常规部分下的第二个屏幕截图中，没有列出任何请求方法、状态代码 或 远程地址，请参阅我之前提到的成功 api put 请求的屏幕截图以供引用:
真正奇怪的是，我的数据库正在使用更新的数据进行更新，因此在某种程度上，即使 PUT 显示为已取消，但它在某种程度上仍在工作。
调用源 self 页面上的 vue 组件，如果这很重要的话，我的后端是 PHP 的。
这是我的 .js 文件中执行 PUT 的调用:
return await SimpleService.put(`${app.API_URL}/matching/questions/${borrowerId}`,
JSON.stringify(answerData), {contentType: 'application/json'})
所以，我认识到，如果没有看到附加的所有代码，要求一个黑白分明的答案是不太现实的，但如果有人甚至可以给我一些要检查的想法，我将不胜感激。
我已尝试包含我能想到的所有内容，但不包含不必要的内容，但如果需要我提供任何其他信息来解决此问题，请告诉我。
最佳答案
菲尔的评论是正确的，这是我所理解的解释。当单击提交 api 调用的按钮时，将执行按钮单击的默认行为，即重新加载页面。好吧，当页面重新加载时，任何正在进行的网络请求都不再被跟踪，这就是为什么请求在我的控制台选项卡中显示为“已取消”。这也解释了为什么 api 调用能够成功更新数据库，因为实际请求没有任何问题。以下是我解决问题所采取的步骤:
- 从我的按钮中删除
onClick事件，该事件正在调用开始 API 调用过程的 javascript 函数 - 将此代码添加到我的按钮所在的表单标记中:
@submit.prevent="myJavascriptFunctionThatStartsAPICall()"
添加 .prevent 可防止发生页面重新加载的默认行为，因此当响应返回到页面时，页面仍在监听它。问题解决了。
我希望这对其他人有帮助。
关于javascript - Api PUT 请求显示为 "cancelled"，错误消息为 "TypeError: failed to fetch"，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56658675/