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

Question

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

我正在现有应用程序中创建一个新网页，并试图执行一个简单的PUT api调用，由于某种原因，它在chrome的“网络”标签上显示了一个cancelled状态开发工具。我要访问的服务器是本地计算机上的VM。我可以从应用程序中现有的其他页面访问相同的端点，并且一切正常，因此我知道端点没有任何问题。这是一些屏幕截图：

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

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

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

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

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

Answer 2

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