vue路由切換時(shí)取消之前的所有請(qǐng)求操作
在main.js文件里
import router from 'router/';
import Vue from 'vue';
Vue.Cancel = [];
router.beforeEach((to, from, next) => {
while (Vue.Cancel.length > 0) {
Vue.Cancel.shift()('cancel');
}
next();
})
ajax文件
import Vue from 'vue';
import axios from 'axios';
import VueAxios from 'vue-axios';
Vue.use(VueAxios, axios);
// 導(dǎo)入封裝的回調(diào)函數(shù)
import {
cbs,
gbs
} from 'config/';
// 動(dòng)態(tài)設(shè)置本地和線上接口域名
Vue.axios.defaults.baseURL = gbs.host;
/**
* 封裝axios的通用請(qǐng)求
* @param {string} type get或post
* @param {string} url 請(qǐng)求的接口URL
* @param {object} data 傳的參數(shù),沒有則傳空對(duì)象
* @param {object} urlParams url傳參
* @param {Function} fn 回調(diào)函數(shù)
* @param {boolean} tokenFlag 是否需要攜帶token參數(shù),為true,不需要;false,需要。一般除了登錄,都需要
*/
export default function ({
type,
path,
data,
params,
urlParams,
fn,
errFn,
tokenFlag,
headers,
opts
} = {}) {
var options = {
method: type,
url: path,
params: params,
headers: headers && typeof headers === 'object' ? headers : {},
cancelToken: new axios.CancelToken(function (cancel) {
Vue.Cancel && Vue.Cancel.push(cancel)
})
};
//檢測(cè)接口權(quán)限
var api_flag = true;
if (options.url && options.url.indexOf(gbs.host) && this.$store.state.user.userinfo.access_status === 1) {
var url = options.url.replace(gbs.host, '');
var api_routers = this.$store.state.user.userinfo.api_routers;
if (!api_routers || !api_routers.constructor === Object || !api_routers[url]) {
api_flag = false;
}
}
var urlParamsArray = [];
if (api_flag === true) {
options[type === 'get' ? 'params' : 'data'] = data;
// 用于url傳參
if (typeof (urlParams) == "object") {
for (var k in urlParams) {
urlParamsArray.push(k + '=' + urlParams[k])
}
options.url += '?' + urlParamsArray.join('&');
}
if (typeof (urlParams) == "string" || typeof (urlParams) == "number") {
options.url += urlParams;
}
if(options.url.indexOf('?') > -1){
options.url += '&_=' + (new Date()).getTime();
}else{
options.url += '?_=' + (new Date()).getTime();
}
// 分發(fā)顯示加載樣式任務(wù)
this.$store.dispatch('show_loading');
if (tokenFlag !== true) {
//如果你們的后臺(tái)不會(huì)接受headers里面的參數(shù),打開這個(gè)注釋,即實(shí)現(xiàn)token通過普通參數(shù)方式傳
// data.token = this.$store.state.user.userinfo.token;
options.headers.token = this.$store.state.user.userinfo.token;
}
//擴(kuò)展Promise使支持finally(),用了babel就不用手寫了^.^
// Promise.prototype.finally=function(callback){
// let Promise = this.constructor;
// return this.then(
// value => Promise.resolve(callback()).then(() => value),
// reason => Promise.resolve(callback()).then(() => { throw reason })
// );
// };
//發(fā)送請(qǐng)求
return new Promise((resolve, reject)=>{
Vue.axios(options).then((res) => {
this.$store.dispatch('hide_loading');
if (res.data[gbs.api_status_key_field] === gbs.api_status_value_field || (res.status === gbs.api_status_value_field && !res.data[gbs.api_status_key_field])) {
fn(res.data);
} else {
if (gbs.api_custom[res.data[gbs.api_status_key_field]]) {
gbs.api_custom[res.data[gbs.api_status_key_field]].call(this, res.data);
} else {
cbs.statusError.call(this, res.data);
if (errFn) {
errFn.call(this, res.data);
}
}
}
resolve(res.data);
}).catch((err) => {
if(err.response && err.response.status !== 403){
try{
errFn?errFn.call(this, this.$$lib__.isObject(err.response.data) ? err.response.data : {}):null;
}catch(err){
console.error(err.message);
}
}
if(err.response && err.response.data === ''){
cbs.statusError.call(this, {status: err.response.status});
} else if (err.response && this.$$lib__.isObject(err.response.data)) {
cbs.statusError.call(this, err.response.data);
}else if(err.response){
cbs.requestError.call(this, err);
} else {
console.error('Error from ', '"'+path+'".', err.message);
}
reject(err);
});
});
} else {
this.$alert('您沒有權(quán)限請(qǐng)求該接口!', '請(qǐng)求錯(cuò)誤', {
confirmButtonText: '確定',
type: 'warning'
});
}
};
核心代碼為cancelToken參數(shù)
var options = {
method: type,
url: path,
params: params,
headers: headers && typeof headers === 'object' ? headers : {},
cancelToken: new axios.CancelToken(function (cancel) {
Vue.Cancel && Vue.Cancel.push(cancel)
})
};
補(bǔ)充知識(shí):problem:vue組件局部刷新,在組件銷毀(destroyed)時(shí)取消刷新無效問題
場(chǎng)景:
一個(gè)群發(fā)消息列表(數(shù)組)
列表下有多條消息(元素)
每條正在發(fā)送的消息數(shù)據(jù)狀態(tài)需要實(shí)時(shí)刷新,發(fā)送完成時(shí)需要顯示成功提示符合且不需要刷新,然后3秒消失。首次顯示列表時(shí),已經(jīng)成功的狀態(tài)不顯示這個(gè)成功提示符。
1、定位確定采用局部刷新
2、進(jìn)入消息列表請(qǐng)求獲取列表數(shù)據(jù)的接口,完成發(fā)送的消息不需顯示完成狀態(tài)
3、正在發(fā)送的消息首次渲染時(shí)就調(diào)用setTimeout輪詢刷新當(dāng)前消息的接口,完成時(shí),顯示完成狀態(tài)(新增一個(gè)完成狀態(tài)的字段)
4、頁(yè)面銷毀時(shí),還在發(fā)送的消息也取消刷新
誤區(qū):
1、每條消息沒有抽成一個(gè)單獨(dú)的組件,想要首次渲染組件調(diào)用刷新接口時(shí),只能通過定義全局map變量來映射每條消息的刷新接口的定時(shí)器,明顯增加業(yè)務(wù)開發(fā)的復(fù)雜度,增加了一些不確定性的bug風(fēng)險(xiǎn)。
每條消息抽成組件之后,就可以在組件中的mounted中去調(diào)用刷新的接口,頁(yè)面銷毀時(shí)取消刷新可以在destroyed里面去銷毀。
2、這里的一個(gè)誤區(qū)是在destroyed里面去清除定時(shí)器的id,導(dǎo)致調(diào)用了destroyed鉤子刷新的定時(shí)器還是無法清除。將定時(shí)器id當(dāng)做一個(gè)屬性值存在了每條數(shù)據(jù)所屬的對(duì)象中,然后在子組件(每條消息所屬的)中的destroyed中去讀取該對(duì)象的當(dāng)前的定時(shí)器屬性,因?yàn)樽x出來是undifined,其實(shí)并沒有拿到當(dāng)前消息正在執(zhí)行的定時(shí)器,所以清除不掉。
組件使用有誤,每一個(gè)組件都是一個(gè)獨(dú)立的元素,其中定義的變量也是私有的,定時(shí)器id定在當(dāng)前組件的data中就可以了,不需要再在數(shù)組中的每一條消息中定一個(gè)專屬的定時(shí)器id。
抽象出來的簡(jiǎn)單版刷新數(shù)據(jù),5秒后取消刷新。
let intervalId = null
function init() {
this.refresh()
}
function refresh() {
intervalId = setTimeout(() => {
this.getRefreshData()
}, 2000);
}
function getRefreshData() {
console.log('start get data.....', intervalId)
setTimeout(() => {
console.log('get data.....')
this.refresh()
}, 100);
}
function stopRefresh() {
console.log('stop....', intervalId)
clearInterval(intervalId)
}
this.init()
setTimeout(() => {
this.stopRefresh()
}, 5000);
以上這篇vue路由切換時(shí)取消之前的所有請(qǐng)求操作就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
- vue3 onMounted異步函數(shù)同步請(qǐng)求async/await實(shí)現(xiàn)
- vue函數(shù)input輸入值請(qǐng)求時(shí)延遲1.5秒請(qǐng)求問題
- Vue2的路由和異步請(qǐng)求方式
- Vue路由切換和Axios接口取消重復(fù)請(qǐng)求詳解
- vue路由攔截器和請(qǐng)求攔截器知識(shí)點(diǎn)總結(jié)
- vue路由導(dǎo)航守衛(wèi)和請(qǐng)求攔截以及基于node的token認(rèn)證的方法
- vue-resource請(qǐng)求實(shí)現(xiàn)http登錄攔截或者路由攔截的方法
- vue請(qǐng)求函數(shù)和路由的安裝使用過程
相關(guān)文章
vue仿淘寶滑動(dòng)驗(yàn)證碼功能(樣式模仿)
淘寶大家都使用過,淘寶滑動(dòng)驗(yàn)證碼的目的是為了驗(yàn)證到底是人還是機(jī)器,今天小編給大家分享的是模仿淘寶滑動(dòng)驗(yàn)證碼的樣式,感興趣的朋友跟隨小編一起看看吧2019-12-12
vue .js綁定checkbox并獲取、改變選中狀態(tài)的實(shí)例
今天小編就為大家分享一篇vue .js綁定checkbox并獲取、改變選中狀態(tài)的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08
vue子組件如何獲取父組件的內(nèi)容(props屬性)
這篇文章主要介紹了vue子組件獲取父組件的內(nèi)容(props屬性),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04
Vue過濾器,生命周期函數(shù)和vue-resource簡(jiǎn)單介紹
這篇文章主要介紹了Vue過濾器,生命周期函數(shù)和vue-resource簡(jiǎn)單介紹,幫助大家更好的理解和使用vue,感興趣的朋友可以了解下2021-01-01
Vue 使用formData方式向后臺(tái)發(fā)送數(shù)據(jù)的實(shí)現(xiàn)
這篇文章主要介紹了Vue 使用formData方式向后臺(tái)發(fā)送數(shù)據(jù)的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
vue3中安裝使用vue-i18n實(shí)時(shí)切換語(yǔ)言且不用刷新
這篇文章主要介紹了vue3中安裝使用vue-i18n實(shí)時(shí)切換語(yǔ)言不用刷新問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-04-04
Vue中靈活拖拽的前端神器VueDraggablePlus的用法詳解
這篇文章主要介紹了一款功能強(qiáng)大、靈活易用的前端組件VueDraggablePlus,作為前端工程師,我們經(jīng)常會(huì)遇到需要實(shí)現(xiàn)拖拽功能的場(chǎng)景,而VueDraggablePlus正是為了解決這一痛點(diǎn)而誕生的,讓我們一起來看看它的特點(diǎn)和用法吧2024-03-03

