Vue中斷axios請求 切換頁面 重複請求

所以我們應該，切換頁面前中斷前面所有請求

在main.js中，重新封裝axios請求，在router.beforeeach強制中斷請求

//vue函式新增乙個原型屬性$axios 指向axios,這樣vue例項或元件中不用再去重複引用axios 直接用this.$axios就能執行axios 方法

});使用請求

this.$axios('get',url,param).then(res=>).catch(err=>);

使用cancel token取消請求

方法一、使用canceltoken.sourse工廠方法建立cancel token

const canceltoken = axios.canceltoken;

const source = canceltoken.source();
axios.get('/user/12345', ).catch(function(thrown) else 
});axios.post('/user/12345', , )
// 取消請求（message 引數是可選的）
source.cancel('operation canceled by the user.');

二、通過傳遞乙個 executor 函式到canceltoken的建構函式來建立 cancel token：

const canceltoken = axios.canceltoken;

let cancel;
axios.get('/user/12345', )
});// cancel the request
cancel();

instance.interceptors.request.use(config => else;

})return config
}, error => )

vue 封裝axios請求

最近接手新的vue專案，發現axios竟然沒有封裝，立馬動手封裝，這裡記錄一下完整的封裝過程，廢話不說，直接上 baseconfig.js檔案 存放各個伺服器的位址 const express require express const proenv require pro.env 生產環境配置檔案...

vue封裝axios請求

新建檔案src utils request.js import axios from axios 自定義配置建立axios的新例項 const service axios.create 無論請求為何種型別，在params中的屬性都會以key value的格式在urlzhong拼 headers 請求...

Vue封裝axios請求

為了方便呼叫api介面，我們封裝axios請求 並在api資料夾中建立兩個兩個js檔案 http.js api.js http.js檔案中寫入 import axios from axios axios.defaults.baseurl axios.defaults.timeout 1000000 ...