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


Posted in Javascript onSeptember 01, 2020

在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路由切换时取消之前的所有请求操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery学习基础知识小结
Nov 25 Javascript
JavaScript使用IEEE 标准进行二进制浮点运算产生莫名错误的解决方法
May 28 Javascript
js中indexof的用法详细解析
Dec 24 Javascript
Jquery的each里用return true或false代替break或continue
May 21 Javascript
Node.js中require的工作原理浅析
Jun 24 Javascript
JavaScript实现在页面间传值的方法
Apr 07 Javascript
js验证身份证号有效性并提示对应信息
Oct 19 Javascript
详解jQuery移动页面开发中的ui-grid网格布局使用
Dec 03 Javascript
js实现抽奖效果
Mar 27 Javascript
js中变量的连续赋值(实例讲解)
Jul 08 Javascript
用JS编写一个函数,返回数组中重复出现过的元素(实例)
Sep 14 Javascript
详解javascript常用工具类的封装
Jan 30 Javascript
jQuery实现动态加载瀑布流
Sep 01 #jQuery
vue Treeselect下拉树只能选择第N级元素实现代码
Aug 31 #Javascript
vue treeselect获取当前选中项的label实例
Aug 31 #Javascript
vue 监听 Treeselect 选择项的改变操作
Aug 31 #Javascript
搭建vscode+vue环境的详细教程
Aug 31 #Javascript
vue组件中实现嵌套子组件案例
Aug 31 #Javascript
vue 项目中当访问路由不存在的时候默认访问404页面操作
Aug 31 #Javascript
You might like
PHP array_flip() 删除重复数组元素专用函数
2010/05/16 PHP
php 冒泡排序 交换排序法
2011/05/10 PHP
PHP中使用gettext解决国际化问题的例子(i18n)
2014/06/13 PHP
简述php环境搭建与配置
2016/12/05 PHP
javascript语句中的CDATA标签的意义
2007/05/09 Javascript
jquery特效 幻灯片效果示例代码
2013/07/16 Javascript
前端开发过程中浏览器版本的两种判定方法
2013/10/30 Javascript
javascript 数组排序函数sort和reverse使用介绍
2013/11/21 Javascript
对 jQuery 中 data 方法的误解分析
2014/06/18 Javascript
使用时间戳解决ie缓存的问题
2014/08/20 Javascript
jQuery实现HTML5 placeholder效果实例
2014/12/09 Javascript
基于touch.js手势库+zepto.js插件开发图片查看器(滑动、缩放、双击缩放)
2016/11/17 Javascript
jquery实现拖动效果(代码分享)
2017/01/25 Javascript
Node.js+ES6+dropload.js实现移动端下拉加载实例
2017/06/01 Javascript
JS实现瀑布流布局
2017/10/21 Javascript
vue项目中vue-i18n和element-ui国际化开发实现过程
2018/04/25 Javascript
Js经典案例的实例代码
2018/05/10 Javascript
从零开始学习搭建React脚手架项目
2018/08/23 Javascript
element-ui 表格数据时间格式化的方法
2018/08/24 Javascript
工作中常用js功能汇总
2020/11/07 Javascript
NodeJS和浏览器中this关键字的不同之处
2021/03/03 NodeJs
python批量导出导入MySQL用户的方法
2013/11/15 Python
Python常见数据结构详解
2014/07/24 Python
Mac下Supervisor进程监控管理工具的安装与配置
2014/12/16 Python
Python脚本实现格式化css文件
2015/04/08 Python
python3简单实现微信爬虫
2015/04/09 Python
浅谈Python 字符串格式化输出(format/printf)
2016/07/21 Python
python3.5 email实现发送邮件功能
2018/05/22 Python
NLTK 3.2.4 环境搭建教程
2018/09/19 Python
详解如何在css中引入自定义字体(font-face)
2018/05/17 HTML / CSS
美国时尚大码女装购物网站:Avenue
2019/05/24 全球购物
在校生自我鉴定
2014/01/23 职场文书
日化店促销方案
2014/03/26 职场文书
企业授权委托书范本
2014/09/22 职场文书
质检员岗位职责
2015/02/03 职场文书
js Proxy的原理详解
2021/05/25 Javascript