Api PUT 请求显示为“已取消"带有错误消息“TypeError: failed to fetch" [英] Api PUT request showing as "cancelled" with error message "TypeError: failed to fetch"

问题描述

这是一个奇怪的情况，我看过很多SO问题，但没有什么是这样的.希望我能得到一些反馈

This is a weird situation, I've looked at loads of SO questions and nothing is quite like it. Hopefully I can get some feedback regarding it

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

I'm creating a new web page in an existing application and am trying to execute a simple PUT api call and for some reason it is showing a status of cancelled on my network tab in chrome dev tools. The server I'm hitting is a VM on my local machine. I can hit the same endpoint from a different existing page in my application and it goes through just fine so I know that there's nothing wrong with the endpoint. Here's some screenshots:

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

This is what the network tab in chrome dev tools looks like:

这是我点击已取消"看跌期权时看到的:

This is what I see when I click on the "cancelled" put call:

这是在 chrome 开发工具的控制台选项卡上显示的内容:

and this is what shows on the console tab of chrome dev tools:

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

One thing to note is that in the second screenshot under the General section on the right it doesn't have anything listed for Request Method, Status Code or Remote Address, see this screenshot of the successful api put request I referred to earlier for reference:

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

The really weird thing is that my database is getting updated with the updated data, so in some way even though the PUT is showing as cancelled it's working to some degree.

调用来自我页面上的一个 vue 组件，如果这很重要的话，我的后端使用 PHP.

The call originates from a vue component on my page and my backend is in PHP if that matters at all.

这是我的 .js 文件中执行 PUT 的调用:

here is the call in my .js file that executes the PUT:

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

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

So, I recognize that without seeing all the code attached to this it isn't really realistic to ask for a black and white answer but if someone can even just give me some ideas of things to check I would greatly appreciate it.

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

I've tried to include everything I can think of without including unnecessary things but if any additional information is needed from me to figure this out please let me know.

推荐答案

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

Phil was right in his comment, here's an explanation from what I understand. When the button was clicked that submitted the api call the default behavior for the button click was executed, which was to re-load the page. Well, when a page is reloaded any in flight network requests are not being tracked anymore, which is why the request was showing as "cancelled" in my console tab. And that also explains why the api call was successful in updating the database, because there wasn't any problem with the actual request. Here's the steps I took to fix my problem:

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

1. remove the onClick event from my button that was calling my javascript function that begins the api call process
2. add this code to the form tag my button lives inside: @submit.prevent="myJavascriptFunctionThatStartsAPICall()"

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

Adding the .prevent prevents the default behavior of the page reloading from happening thus when the response is returned back to the page the page is still listening for it. Problem solved.

我希望这能帮助其他人.

I hope this helps someone else out.

这篇关于Api PUT 请求显示为“已取消"带有错误消息“TypeError: failed to fetch"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！