Api PUT 请求显示为“已取消”，并显示错误消息“TypeError: failed to fetch”答案

【问题标题】：Api PUT request showing as "cancelled" with error message "TypeError: failed to fetch"Api PUT 请求显示为“已取消”，并显示错误消息“TypeError: failed to fetch”
【发布时间】：2019-11-01 15:54:10
【问题描述】：

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

我正在现有应用程序中创建一个新网页，并尝试执行一个简单的PUT api 调用，由于某种原因，它在我的 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'})

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

我已尝试将我能想到的所有内容都包括在内，但不包括不必要的内容，但如果需要我提供任何其他信息来解决这个问题，请告诉我。

【问题讨论】：

"cancelled" AJAX 请求的常见原因是客户端（浏览器）导航离开创建请求的页面。您是否使用<a> 或表单提交按钮来触发请求？如果是这样，您是否阻止了默认事件操作，例如<a @click.prevent="doPutRequest"> / <form @submit.prevent="doPutRequest">？
如果您在 Network 控制台中取消选中“XHR”-only 选项，则更容易判断发生了什么
@Phil 非常感谢，您说得对，需要 .prevent 来阻止默认操作的发生。我提交了一个概述解决方案的答案，但如果你提交了一个答案，我会投票赞成并选择它作为接受的答案。
不，您的回答是对问题和解决方案的出色描述。很高兴你把它整理好了

标签： javascript api

【解决方案1】：

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

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

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

我希望这对其他人有所帮助。

【讨论】：

【解决方案2】：

它只是请求状态。如果一切正确，您应该在后端返回状态码 200。 Chrome 认为请求失败是因为您返回了 499 Client Closed Request 或 444 No Response 之类的错误代码。

【讨论】：