vue axios路由跳轉取消所有請求

皇大大發表於2019-01-16
VueiOS路由
1.這兩天公司有個小專案 用的vue寫。但是上一個路由的請求結果在當前路由頁面提示，非常難看。所以就有了這個需求。

2.剛開始 想這個還不簡單嗎？ 面向百度程式設計： 開啟百度=> 輸入標題=> 然後看了同行的各種操作。。。。一頓操作猛如虎，一看戰績0:5,我絕望了。尼瑪 取消的我所有請求都發不出去了。

3 直到我看到一個人的連結github.com/axios/axios…。感謝 Chobits 同學。開啟一看感覺好熟悉，那就看看吧。我靠 這不是axios github地址嗎？ 然後看了官網例項，醍醐灌頂。。。我走了多少彎路。所以推薦以後還是 官方文件作為第一選項。

4.下面說說下實現思路：

第一步： axios 怎麼取消：

const CancelToken = axios.CancelToken;
let cancel;
axios.get('/user/12345', {
  cancelToken: new CancelToken(function executor(c) {
    // An executor function receives a cancel function as a parameter
    cancel = c;
  })
});
// cancel the requestcancel();
cancel()複製程式碼

第二步： 這是取消一個axios 如果是多個呢？那麼我們就需要有個地方給存下來。我本來打算用vuex 但是我這是小專案，本來就沒用vuex，所以就直接建立個檔案store.js

let store = {_axiosPromiseCancel: [] };
export default store;複製程式碼

第三步： axios 攔截器axios.js( 簡化版)

import store from './store';
const CancelToken = axios.CancelToken;
axios.interceptors.request.use(config=>{
   // 這個是 取消重點
  config.cancelToken = new CancelToken((cancel) => {     
     store._axiosPromiseCancel.push(cancel);
  });
  return config;
});
axios.interceptors.response.use(res=>{
  // do something...
  },error=>{
   if (axios.isCancel(error)) {
   // 為了終結promise鏈 就是實際請求 不會走到.catch(rej=>{});這樣就不會觸發錯誤提示之類了。
        return new Promise(() => {});     
   }else{
       return Promise.reject(error)
    }});複製程式碼

第四步： 就是在router 裡做取消動作了 router.js

import store from './store';
router.beforeEach((to, from, next) => {
   store._axiosPromiseCancel.forEach(e=>{
      e && e()
   });
   store._axiosPromiseCancel = [];
})複製程式碼

好了，程式碼我們搞定了。那麼我們看看效果

vue axios路由跳轉取消所有請求

vue axios路由跳轉取消所有請求

可以看到 我們多麼渴望的 cancel 出現了。控制檯只列印了 cancel資訊 而沒有 列印出.catch 裡面的資訊。說明 promise鏈也終止了。

之前有個關於前後端快取的問題，我也是花半天時間解決了，但是沒有記錄。都忘記怎麼解決了。 現在把這個記下來，當個筆記吧。

總結： 有不對之處 還請大佬們多指正。


相關文章