中断ページを切り替えます
I.概要
私は長い間、前回のページ要求の実行のためにページを切り替えるような状況を、遭遇した開発プロセスのVueの単一ページ、そのページへのスイッチは、まだ行われていない場合、要求は、要求されるまで継続されます最後に、この時間は、ページのパフォーマンス、およびページに影響するデータに何らかの影響を表示することが可能になりました
我々べき、スイッチング改ページの前に、以前のすべての要求ので、
第二に、ソリューション
main.jsでは、再シールaxiosは、トラップ要求router.beforeEachを要求します
Vue.prototype.$http= axios;
//Vue函数添加一个原型属性$axios 指向axios,这样vue实例或组件中不用再去重复引用Axios 直接用this.$axios就能执行axios 方法
const CancelToken = axios.CancelToken;
Vue.$httpRequestList=[];
Vue.prototype.$ajax = (type, url, data) => {
return new Promise((resolve, reject) => { //封装ajax
var aa = {
method: type,
url: url,
cancelToken: new CancelToken(c => { //强行中断请求要用到的
Vue.$httpRequestList.push(c);
})
}
var json = (type == 'get') ? Object.assign(aa, { params: data }) : Object.assign(aa, { data: data });
var ajax = Vue.prototype.$http(json).then(res => {
resolve(res);
}).catch(error => { //中断请求和请求出错的处理
if (error.message == "interrupt") {
console.log('已中断请求');
return;
} else {
reject(error);
}
})
return ajax;
})
};
router.beforeEach((to, from, next) => { //路由切换检测是否强行中断,
if(Vue.$httpRequestList.length>0){ //强行中断时才向下执行
Vue.$httpRequestList.forEach(item=>{
item('interrupt');//给个标志,中断请求
})
}
next();
});
使用要求
this.$axios('get',url,param).then(res=>{
}).catch(err=>{
});
第三に、分析と解釈
中国の公式ウェブサイト(axios キャンセルするhttp://www.axios-js.com/zh-cn/docs/)トークンの説明を
使用して、トークンの取り消し要求をキャンセル
キャンセルトークンを作成するためにcancelToken.sourseファクトリメソッドを使用する方法
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 {
// 处理错误
}
});
axios.post('/user/12345', {
name: 'new name'
}, {
cancelToken: source.token
})
// 取消请求(message 参数是可选的)
source.cancel('Operation canceled by the user.');
するために、伝達関数エグゼキュータによって、第二の方法CancelToken
のトークンのコンストラクタを取り消す作成します。
const CancelToken = axios.CancelToken;
let cancel;
axios.get('/user/12345', {
cancelToken: new CancelToken(function executor(c) {
// executor 函数接收一个 cancel 函数作为参数
cancel = c;
})
});
// cancel the request
cancel();
繰り返し割り込み要求
instance.interceptors.request.use(config => {
config.cancelToken = new CancelToken(c => {
if(hasKey(this.queue,url)) {
c(url);
}else{
this.queue[url] = true;
};
})
return config
}, error => {
//return Promise.reject(error)
})