Api PUT请求显示为“已取消".错误消息"TypeError:提取失败"； [英] 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调用，由于某种原因，它在chrome dev工具的网络"标签中显示了cancelled的状态.我遇到的服务器是本地计算机上的VM.我可以从应用程序中现有的其他页面访问相同的端点，并且可以正常运行，因此我知道该端点没有任何问题.这是一些屏幕截图:

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的屏幕截图我之前提到的请求以供参考:

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. 从我调用开始api调用过程的javascript函数的按钮中删除onClick事件
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:提取失败"；的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！