vue路由切換終止請求

問題：

在spa模式開發當中，比如vue ，當前路由切換的時候如何終止正在發生的非同步請求呢，

結果：

假如請求超時並且有設定超時時間。有一堆的非同步請求在執行，當使用者切換到另乙個頁面，這些請求還未終止，並且當伺服器響應之後，反饋的結果不是當前頁面所期待的。最終會誤導使用者造成一些不必要的結果。也給web 造成效能問題。

解決方案：

把執行的請求存入佇列，當路由切換的時候終止佇列裡的非同步請求。

首先搞一棵樹來儲存請求佇列

import vue from 'vue'

import vuex from 'vuex'
vue.use(vuex)
let store = new vuex.store(
})new vue()

var xhr = $.ajax(

}) 終止請求
this.$store.state.requests.push(xhr)

const request = require('superagent')

var xhr = request('post','/api/***x/***x')
xhr.send(data)
//get 傳參
xhr.end((err,res)=>)
終止請求
this.$store.state.requests.push(xhr)

import axios from 'axios'

var canceltoken = axios.canceltoken;
var source = canceltoken.source();
axios.get('/api/***xx/***xx', ).catch(function(thrown) else 
});// 取消請求（message 引數是可選的）
'operation canceled by the user.');
this.$store.state.requests.push(source)

}).then(response => , response => );利用fetch 請求

fetch 貌似無法監控讀取進度和終端請求，他沒有timeout機制，沒有progress提示，但是可以利用promise 來實現終止

var _fetch = (function(fetch);

});var promise = promise.race([
fetch(url,options),
abort_promise
]);promise.abort = abort;
return promise;
};})(fetch);
var xhr = _fetch('/api/***/***x',);
xhr.then(function(res) , function(e) );
xhr.abort(); //終止
this.$store.state.requests.push(xhr)

let router = new router()

//每次路由改變之前終止所有的請求例項
router.beforeeach(function (to, from, next) )

這種只是假設，自然請求完成之後最好，還是手動釋放樹的請求示例。例如ajax 請求完成之後 在complite 裡面 splice store裡面的例項。

posted @

2019-03-02 18:06

邱秋 閱讀(

...)

編輯收藏

vue實現路由切換改變title

由於vue專案通常是單頁應用，因此在入口檔案index.html只有乙個title，單頁所展示的若干頁面只是隨著路由的切換而在同乙個index.html上不同的渲染而已，因此此時的title屬性是不會隨著頁面的切換而變更的 那麼想實現路由切換title變換可以通過vue router的導航守衛來實現...

Vue路由的切換動效

如果需要路由有過渡動畫，需要在 router view 標籤的外部新增 transition 標籤，如果有多個 router view 標籤則需在外部新增 transition group 同時標籤還需要乙個name屬性並為每乙個元件設定乙個key值。元件過渡過程中，會有css類名進行切換，類名與t...

AbortController 終止請求

abortcontroller abortcontroller 建構函式建立乙個控制器 const controller newabortcontroller 屬性獲取其關聯 abortsignal物件的引用。let signal controller.signal const downloadbt...