热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

vue路由切换时取消之前的所有请求操作

这篇文章主要介绍了vue路由切换时取消之前的所有请求操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

在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);

// 导入封装的回调函数
import {
 cbs,
 gbs
} from 'config/';

// 动态设置本地和线上接口域名
Vue.axios.defaults.baseURL = gbs.host;

/**
 * 封装axios的通用请求
 * @param {string} type get或post
 * @param {string} url 请求的接口URL
 * @param {object} data 传的参数,没有则传空对象
 * @param {object} urlParams url传参
 * @param {Function} fn 回调函数
 * @param {boolean} tokenFlag 是否需要携带token参数,为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)
 }) 
 };

 //检测接口权限
 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();
 }

 // 分发显示加载样式任务
 this.$store.dispatch('show_loading');

 if (tokenFlag !== true) {
  //如果你们的后台不会接受headers里面的参数,打开这个注释,即实现token通过普通参数方式传
  // data.token = this.$store.state.user.userinfo.token;

  options.headers.token = this.$store.state.user.userinfo.token;
 }

 //扩展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 })
 // );
 // };
 //发送请求
 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('您没有权限请求该接口!', '请求错误', {
  confirmButtonText: '确定',
  type: 'warning'
 });
 }
};

核心代码为cancelToken参数

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)
 }) 
 };

补充知识:problem:vue组件局部刷新,在组件销毁(destroyed)时取消刷新无效问题

场景:

一个群发消息列表(数组)

列表下有多条消息(元素)

每条正在发送的消息数据状态需要实时刷新,发送完成时需要显示成功提示符合且不需要刷新,然后3秒消失。首次显示列表时,已经成功的状态不显示这个成功提示符。

1、定位确定采用局部刷新

2、进入消息列表请求获取列表数据的接口,完成发送的消息不需显示完成状态

3、正在发送的消息首次渲染时就调用setTimeout轮询刷新当前消息的接口,完成时,显示完成状态(新增一个完成状态的字段)

4、页面销毁时,还在发送的消息也取消刷新

误区:

1、每条消息没有抽成一个单独的组件,想要首次渲染组件调用刷新接口时,只能通过定义全局map变量来映射每条消息的刷新接口的定时器,明显增加业务开发的复杂度,增加了一些不确定性的bug风险。

每条消息抽成组件之后,就可以在组件中的mounted中去调用刷新的接口,页面销毁时取消刷新可以在destroyed里面去销毁。

2、这里的一个误区是在destroyed里面去清除定时器的id,导致调用了destroyed钩子刷新的定时器还是无法清除。将定时器id当做一个属性值存在了每条数据所属的对象中,然后在子组件(每条消息所属的)中的destroyed中去读取该对象的当前的定时器属性,因为读出来是undifined,其实并没有拿到当前消息正在执行的定时器,所以清除不掉。

组件使用有误,每一个组件都是一个独立的元素,其中定义的变量也是私有的,定时器id定在当前组件的data中就可以了,不需要再在数组中的每一条消息中定一个专属的定时器id。

抽象出来的简单版刷新数据,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路由切换时取消之前的所有请求操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。


推荐阅读
  • ServletContext接口在Java Web开发中扮演着重要角色,它提供了一种方式来获取关于整个Web应用程序的信息。通过ServletContext,开发者可以访问初始化参数、共享数据以及应用资源。 ... [详细]
  • 辗转相减法在求解最大等比值问题中的应用
    本文探讨了如何利用辗转相减法解决X星球大奖赛中奖金分配的数学问题,通过分析给定的数据点,计算出可能的最大等比值。 ... [详细]
  • 本文介绍了在Windows 7操作系统中设置电脑自动启动的步骤,包括通过BIOS设置来电启动以及使用任务计划程序实现定时开机的功能。此外,还提供了通过键盘、鼠标和网络唤醒等方式实现自动开机的多种方法。 ... [详细]
  • 本文详细介绍了Linux操作系统中的cp和scp命令,包括它们的基本使用方法、常见选项以及如何通过scp命令安全地在不同主机之间传输文件。 ... [详细]
  • 本文详细介绍了Manacher算法,该算法能够在O(n)时间内找到字符串中的最长回文子串。通过对字符串进行预处理,并使用动态规划的思想,Manacher算法能够高效地解决这一问题。 ... [详细]
  • 在Windows 7系统中,ctfmon进程对于正常启用输入法至关重要。通常,该进程应通过启动项自动运行。然而,有时用户可能会发现启动项中缺失ctfmon进程,导致输入法无法正常使用。 ... [详细]
  • VMware Horizon View 5.0桌面虚拟化部署实践与心得
    在近期的研究中,我花费了大约两天时间成功部署了桌面虚拟化环境,并在此过程中积累了一些宝贵的经验。本文将分享这些经验和部署细节,希望能对同样关注桌面虚拟化的同行有所帮助。 ... [详细]
  • 探讨 != 运算符在C++中的重写候选条件,分析标准文档中的相关规定及其应用。 ... [详细]
  • Photoshop打造炫酷金色锈迹立体文字
    本文介绍如何使用Photoshop创建具有金属质感和锈迹效果的立体文字。通过叠加多个带有特定图层样式的文字图层,结合火焰背景,营造出独特的视觉冲击力。 ... [详细]
  • 探讨在构建类似Viber或WhatsApp的聊天应用时,如何有效实现客户端(Web、Android、iOS)与服务器之间的连接。本文将分析使用WebSockets标准及其替代方案的优劣。 ... [详细]
  • 本文探讨了C++中如何正确使用+运算符来处理字符串和数字的拼接问题,分析了为何某些操作有效而另一些则会引发编译错误。 ... [详细]
  • 地球坐标、火星坐标及百度坐标间的转换算法 C# 实现
    本文介绍了WGS84坐标系统及其精度改进历程,探讨了火星坐标系统的安全性和应用背景,并详细解析了火星坐标与百度坐标之间的转换算法,提供了C#语言的实现代码。 ... [详细]
  • 本文详细探讨了C++中闭包的概念及其实现方式,包括通过重载operator()、使用lambda表达式以及std::bind等方法,旨在帮助开发者更好地理解和运用闭包。 ... [详细]
  • 在Kubernetes集群中部署Kuboard
    本文详细介绍了如何在Kubernetes(简称k8s)环境中部署Kuboard,包括必要的命令和步骤,帮助用户顺利完成安装。 ... [详细]
  • 本文介绍了两种获取和研究 .NET Framework 源代码的有效途径:一是通过官方提供的下载链接获取完整源代码,并使用 Visual Studio 进行本地查看;二是利用在线资源平台,直接在网页上浏览源代码。 ... [详细]
author-avatar
行侠客人生_983
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有