vueにおけるaxiosによる複数回の複数回のトリガによる複数回のリクエストの終了を防止するサンプルコード(ジッタ防止)
1568 ワード
需要
たとえば、検索ボックスでは、文字を入力するだけでデータをレンダリングする必要はありません.最後の入力内容を検索します.
AAAAAを連続的に押して、最後に押したときの検索ボックスの内容(すなわち、AAAAA)だけを取り出して検索する.A(1回目の押下)、AA(2回目の押下)、AAAに関連するコンテンツを検索するのではなく
この例では、ユーザーが入力した値を検出し、この値を監視し、値に基づいてインタフェースクエリ結果を呼び出す
コード:
その他の方法:
cleartimeout()settimeout()を使用して切り取り、常に要求するように設定できます.
まとめ
以上、編集者がご紹介したvueにおけるaxiosによる複数回のトリガによる複数回のリクエストの終了を防止する実現方法(ジッタ防止)について説明しましたが、皆さんの役に立つことを願っています.
たとえば、検索ボックスでは、文字を入力するだけでデータをレンダリングする必要はありません.最後の入力内容を検索します.
AAAAAを連続的に押して、最後に押したときの検索ボックスの内容(すなわち、AAAAA)だけを取り出して検索する.A(1回目の押下)、AA(2回目の押下)、AAAに関連するコンテンツを検索するのではなく
この例では、ユーザーが入力した値を検出し、この値を監視し、値に基づいてインタフェースクエリ結果を呼び出す
コード:
import axios from "axios";
export default {
data(){
return{
message:''
},
watch : {
message(newVal){
var that = this;
//
this.cancelRequest();
axios.get('/api/searchList?cityId=10&kw='+ newVal, {
cancelToken: new axios.CancelToken(function(c) {
that.source = c;
})
}).then((res) => {
//
//
}).catch((err) => {
if (axios.isCancel(err)) {
console.log('Rquest canceled', err.message); // ， message
} else {
//handle error
console.log(err);
}
})
}
},
methods: {
cancelRequest(){
if(typeof this.source ==='function'){
this.source(' ')
}
}
}
}
その他の方法:
cleartimeout()settimeout()を使用して切り取り、常に要求するように設定できます.
まとめ
以上、編集者がご紹介したvueにおけるaxiosによる複数回のトリガによる複数回のリクエストの終了を防止する実現方法(ジッタ防止)について説明しましたが、皆さんの役に立つことを願っています.