10. vue axios 請求未完成時路由跳轉報錯問題

axios 請求未完成時路由跳轉報錯問題

前兩天項目基本功能算是完成了，在公司測試時遇到了遇到了一個問題，那就是在請求未完成時進行路由跳轉時會報錯，想了幾種辦法來解決，例如加loading，請求攔截，還有就是路由跳轉時取消之前的請求。
這里我用的是路由跳轉時取消之前的請求

問題解決方法

data() {
    return {
        source: null,
    }
},
method(){
    cancel() { // 取消請求
      this.source.cancel('這里你可以輸出一些信息，可以在catch中拿到')
    },
    getData(url){
        this.source = this.axios.CancelToken.source(); // 這里初始化source對象
        let params = {}
        this.axios.get(url,{
                cancelToken: this.source.token,// 這里聲明的cancelToken其實相當於是一個標記，當我們要取消請求的時候，可以通這個找到該請求
                params
         }).then(res=>{ 
                // 成功執行
         }).catch(res => {
            // 如果調用了cancel方法，那么這里的res就是cancel傳入的信息
            // 你的邏輯
            this.cancel()
          })
    }
}

netWork
顯示

這樣就可以取消那些加載慢的請求，我沒有封裝請求，所以只能一個一個的取消，當然可以封裝個請求攔截器，直接在攔截器中取消請求。

但回到家又試了下，基本不會有問題公司的網太慢了，請求相應的也比較長