We all encounter this situation in the project. When we enter a page, we create a module of the system by clicking the Create button. When you click this button, the api request has been sent. If you click the button again at this time, if you do nothing, the api request will be triggered again. That is, two identical requests are made at this time, which we don't want to see. There are many ways to solve this problem: for example, when a button is clicked, disable the button until the background of the request returns data, and then release the disabled button. But the problem with this method is that if there are many places in your project that need to be dealt with, you will need to do it everywhere, which will increase the workload and repeat the boring steps.

So I introduce another scheme here, that is, through the interceptor of vue router. The general logic is: click the button first, and the interceptor will intercept the request requested by the api. When it is judged that the request is a post request, the passed parameters will be encrypted by MD5 and encrypted into a unique signature string. Judging whether the request comes from the same api by this signature string. Save the signature in the session and judge whether it is multiple requests from a single api in a short time.

When the request is issued, we also send the signature string to the background of the requesting shepherd. At this time, we need to cooperate with the background to let the background developers return the signature string we passed to us in response headers again. The reason for this is that when this request has returned data, we need to remove the original restriction that prohibits the same api from requesting again. Through the signature returned by the background, you can know that the api is going to be released.

Note: No matter whether the request is timed out or wrong, the signature array in the cache should be cleared, otherwise the interface cannot be requested again next time.

Method of generating signature by MD5 encryption:

Here, the signature string is passed into the request header and then put back into the response header in the background. So as to judge whether the api request has been completed. If you don't want to pass the signature string into the background, you can also define a timer yourself. For example, set the timer to 5 seconds. If the signature string appears more than twice in 5 seconds, the request is only sent once, or it can be controlled to wait until the request is completely completed before sending the request. But there is a problem, that is, the time of the timer can't be determined, because the speed of interface request has a lot to do with the network, and there is no guarantee that the interface can complete the request within the time you set, so I used another method here.

In a complete api request, the signature string is passed in and returned: