Shulou(Shulou.com)05/31 Report--

This article mainly explains "how to repeat axios in vue to cancel the last request encapsulation". 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 repeat axios in vue to cancel the last request encapsulation.

Working with scen

Click repeatedly or multiple tab tags use a view, etc. (of course, you can also use loading or transparent background to prohibit clicking again in the request)

Encapsulation code

From the Internet.

Let pending = []; / / declare an array to store the cancel function and axios identity let cancelToken = axios.CancelToken;let removePending = (config) = > {for (let p in pending) {if (signing [p] .u = config.url +'&'+ config.method) {/ / execute the function body cancel [p] .f () when the current request exists in the array; / / execute the cancel operation pending.splice (p, 1) } / http request interceptor axios.interceptors.request.use (config = > {removePending (config); / / perform the cancel operation config.cancelToken = new cancelToken ((c) = > {/ / the axios here identifies that I am a string concatenated using the request address & request method, of course you can choose some other ways pending.push ({u: config.url +'&'+ config.method, f: C}) }); return Promise.resolve (config)}, error = > {return Promise.reject (error)}) / / http response interceptor axios.interceptors.response.use (data = > {removePending (data.config); / / cancel after an axios response to remove return Promise.resolve (data)} from pending, error = > {/ load failed return {'data': {} / return Promise.reject (error)})

After many tests, I found that different requests were also cancelled because the request parameters were not verified, that is, the get request is available. Modify the following code

Pending.push ({u: config.url +'&'+ config.method, f: C})

Modified to:

Pending.push ({u: config.url + JSON.stringify (config.data) +'&'+ config.method, f: C}); / / config.data is the request parameter

The above judgment also needs to be modified so that both get request and post can be used.

At this point, I believe you have a deeper understanding of "how to repeat axios in vue to cancel the last request encapsulation". 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.