ホームページ > 記事 > ウェブフロントエンド > vue axios ページを切り替えるときにリクエストを中断する方法
今回はvue axiosのページ切り替え時にリクエストを中断する方法を紹介します。 vue axiosのページ切り替え時にリクエストを中断する場合の注意事項は何か、具体的なケースを見てみましょう。
は次のとおりです:
Vue.prototype.$ajax=axios; const CancelToken = axios.CancelToken; let cancel; let cancelAjaxText = '中断成功'; Vue.prototype.post = function(url,data,loading){ var ajax = Vue.prototype.$ajax({ method: 'post', url:url, data: data, cancelToken: new CancelToken(c => { //强行中断请求要用到的 cancel = c }) }).then(res =>res.data,res=>{ //中断请求和请求出错都会走这里,我这里用 cancelAjaxText 来区别 if(res.message == cancelAjaxText){ return {status : false,msg:cancelAjaxText} }else{ this.$confirm('登录过时,是否重新登录', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { window.location.href = Vue.prototype.url_head + '/'; }).catch(() => { }); } }) return ajax; };
axiosに接続し、POSTメソッドにcancelTokenデータを追加します。上記のelseでは、割り込みリクエストとリクエストエラーがそこに送信されるため、それを識別するためにmsgを使用します。 インターフェース戻り値にmsgもありますので統一してください);
以下はリッスンルーターに置くリクエストを中断するメソッドです。beforeそれぞれのルーティングスイッチのキャンセルメソッドです。投稿の cancelToken から取得されます
rrreeVue.prototype.cancelAjax = function(){ //切换页面强行中断请求 router.beforeEach中用到 if(cancel){ cancel(cancelAjaxText); } }
Call post
router.beforeEach((to, from, next) => { <span style="white-space:pre;"> </span>Vue.prototype.cancelAjax() next(); });
この記事のケースを読んだ後は、この方法を習得したと思います。さらに興味深い情報については、次の点に注意してください。 php中国語サイトその他関連記事!
推奨読書:
以上がvue axios ページを切り替えるときにリクエストを中断する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。