need
For example, in the search box, it is not that you need to render the data once when you enter a word, but instead take the last input content for searching.
Press AAAAA continuously to search only the content of the search box (i.e., AAAAA) when the last press was pressed. Instead of searching for content related to A (first press), AA (second press), AAA
Example in this article: Detect the value entered by the user, monitor this value, and then call the interface to query the results based on the value
Code:
<template>
<input type="text" v-model="message">
<template>
<script>
import axios from "axios";
export default {
data(){
return{
message:''
},
watch : {
message(newVal){
var that = this;
// Cancel the last request ();
('/api/searchList?cityId=10&kw='+ newVal, {
cancelToken: new (function(c) {
= c;
})
}).then((res) => {
// Process the resulting data here //Data logic processing }).catch((err) => {
if ((err)) {
('Rquest canceled', ); //If the request is cancelled, here is the message that returns the cancellation } else {
//handle error
(err);
}
})
}
},
methods: {
cancelRequest(){
if(typeof ==='function'){
('Terminate request')
}
}
}
}
</script>
Other practices:
You can use clearTimeout() setTimeout() intercept, and set it to request it once a time.
Summarize
The above is the implementation method (anti-shake) in Vue that the editor introduced to you by axios in Vue (anti-shake) to prevent multiple triggers and terminate multiple requests. I hope it will be helpful to everyone!