Shulou(Shulou.com)06/03 Report--

This article focuses on "how to solve the problems caused by clicking and switching functions on multiple Tab pages". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "how to solve the problems caused by clicking and switching functions on multiple Tab pages".

You must have encountered such a similar scenario: multiple Tab pages click switch function, if the user clicks frequently, the current page is likely to display the data of other pages.

Because the time for returning information from each interface is different, you cannot guarantee that the first request will return the data first, so it is likely that the data will stay on one page but appear on another page. The term for this asynchronous situation is called asynchronous racing.

At this time, some readers will surely say, this is not easy, I can easily come up with several solutions for you.

Throttling, anti-shaking, plus Loading!

These practices can solve the problem, but they all address the symptoms rather than the root causes, and affect the user experience, in fact, there is a perfect way to solve the problem: cancel the request.

Of course, this cancellation request just does not continue to process the subsequent response of the interface, and does not really cancel the request. After all, if the request has been sent, we can't get it back along the network cable.

Let's take axios as an example to see how to cancel a request:

Const CancelToken = axios.CancelToken; const source = CancelToken.source (); axios.get ('/ user/12345', {cancelToken: source.token}) .catch (function (thrown) {if (axios.isCancel (thrown)) {console.log ('Request canceled', thrown.message);} else {/ / handle error}}) Axios.post ('/ user/12345', {name: 'new name'}, {cancelToken: source.token}) / / cancel the request (the message parameter is optional) source.cancel (' Operation canceled by the user.')

The usage is quite simple, and we can use this method to solve the situation where asynchronous racing may occur. Simple and easy to use, will not affect the user experience, encapsulated code can be used.

At this point, I believe you have a deeper understanding of "how to solve the problems caused by clicking and switching functions on multiple Tab pages". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.