vue-resourceでグローバルブロッカーを設定する際に発生する2つの問題
1988 ワード
1、vueプロジェクト、main.jsにはvue-resourceのグローバルブロックが設定されています.あるページはタイマーを採用して長い接続を実現し、プロジェクトの需要は現在のページの要求を取得し、ページを離れる時に要求をクリアすることである.リクエストをstroeに格納するため、対応するコンポーネントのthisをブロッカーで使用する必要がありますが、使用時に取得されたthisは対応するコンポーネントインスタンスではありません.最終的にVUEのプロトタイプ上で関数を定義し、ブロッカーで関数を呼び出すことで、thisを正しく取得することができ、以下のように実現される.
ps:対応するコンポーネントにリクエスト・ブロッカーを設定してみました.本来は「ローカル・ブロッカー」を設定し、「ローカル・ブロッカー」で現在のコンポーネントが取得できるthisを取得しようとしましたが、ページに入るたびに新しいコンポーネント・インスタンスが生成され、古いインスタンスはクリアされません.両方のコンポーネントが同じリクエストを発行します.ブロッキングはグローバルブロッキングしか設定できない可能性があると推測し、いわゆる「ローカルブロッキング」はだめで、放棄した.
2、上記のコードには、特定の要求をブロック処理するほか、要求のタイムアウトを処理する機能がある.ページ長接続サーバ側で設定されたタイムアウト時間は3分ですが、chromeブラウザでは、要求タイムアウトが2分未満の場合にブラウザがエラーを報告することがわかります.そのため、カスタムタイムアウト処理を加えてタイムアウト時間を設定し、その要求をポイントクリアして次の要求に進みます.上記のように設定した後、要求開始時にタイムアウト時間とタイムアウト処理関数を設定する必要があります.
let vm = new Vue({
router,
store,
i18n,
render: h => h(App)
}).$mount('#app');
Vue.prototype.pushRequest = function (request) {
// console.log(this); this Vue
this.$store.commit('updateRequest',request);
};
Vue.http.interceptors.push((request, next) => {
//console.log(this)// this Vue
if(request.url === 'api/v2.0/monitor/data'){
vm.pushRequest(request);
}
let timeout ;
if(request._timeout){
timeout = setTimeout(()=>{
if(request.onTimeout){
request.onTimeout(request);
request.abort();
}
},request._timeout);
}
next((response) => {
clearTimeout(timeout);
return response;
});
});
ps:対応するコンポーネントにリクエスト・ブロッカーを設定してみました.本来は「ローカル・ブロッカー」を設定し、「ローカル・ブロッカー」で現在のコンポーネントが取得できるthisを取得しようとしましたが、ページに入るたびに新しいコンポーネント・インスタンスが生成され、古いインスタンスはクリアされません.両方のコンポーネントが同じリクエストを発行します.ブロッキングはグローバルブロッキングしか設定できない可能性があると推測し、いわゆる「ローカルブロッキング」はだめで、放棄した.
2、上記のコードには、特定の要求をブロック処理するほか、要求のタイムアウトを処理する機能がある.ページ長接続サーバ側で設定されたタイムアウト時間は3分ですが、chromeブラウザでは、要求タイムアウトが2分未満の場合にブラウザがエラーを報告することがわかります.そのため、カスタムタイムアウト処理を加えてタイムアウト時間を設定し、その要求をポイントクリアして次の要求に進みます.上記のように設定した後、要求開始時にタイムアウト時間とタイムアウト処理関数を設定する必要があります.
context.$http.post('api/v2.0/monitor/data',info,{_timeout:118000,onTimeout:(request)=>{console.log(' ')},
}).then(function (res) {
},function(err){
if(context.$route.path==='/monitor'){
context.timeout1 = setTimeout(that._getMonData1(context,info),5000);
}else{
context.timeout1 ='';
}
})
がタイムアウト処理を行った後、現在の要求は停止し、err関数を実行し、長い接続ページにあるかどうかを判断し、次の要求を発行する.