Ajax request status is cancelled: record a bug check


Project background

The project is areact+antdManagement background of

Bug description

Ajax request status is cancelled: record a bug check

When Bank of Qingdao is selected, click query, the page refreshes, and the query conditions become the default pressure test environment. But since then it has been normal:

Ajax request status is cancelled: record a bug check

That is to say, this problem only appears when you enter the page for the first time. It’s very mysterious. afterdebuggerAfter many investigations, it was finally determined that it was the problem of the request. Of course, I will go if I asknetworkLook inside

Ajax request status is cancelled: record a bug check

It is found that the request initiated after clicking query for the first time is not successful at all,statusbycanceledStatus, strongly recommendedchromeLieutenant generalPreserve logCheck this box

Ajax request status is cancelled: record a bug check

This way, the previous request remains when the page is refreshed. Before that, I didn’t tick it. It took me a long time to locate the problem.

Bug cause

If you locate the problem, you can search it accurately. DirectlygoogleSearch requeststatusbycanceled”。 That is to say, requestcanceledAfter that, the browser refreshes the page. So why is the statecanceledWhat about it? Why did the browser cancel the request? I believe you have guessed the answer. The question isformIt’s on the list. So what I used wasbuttonSubmitted the form,form actionEvents and bindingbutton(ortypebysubmitOfinputElement) on the buttonclickEvent triggered at the same time,form actionThe form content is appended as a parameter to theurlAndurlThe browser refresh is caused by the change of. When it is requested again laterurlNo change. Therefore, only the first time into such a page will have this problem.

Bug solving

Knowing the reason, it’s very convenient to solve it. Just stop the default behavior directly


In fact, injQyeryAt that time, it’s easy to think of preventing default behavior. Now useantdPackagedFormandButtonComponents are easy to forget. Although it’s not a big discovery, it’s still a record of your learning process.

Recommended Today

The way of nonlinear optimization

Mathematical knowledge 1、 Nonlinear functionLinear function is another name of a function of first degree, then nonlinear function means that the function image is not a function of a straight line.Nonlinear functions include exponential function, power function, logarithmic function, polynomial function and so on. 2、 Taylor expansion1. Taylor formula:Taylor’s formula is to add a_ The […]