vue切换菜单取消未完成接口请求的案例


Posted in Javascript onNovember 13, 2020

在做别的功能时 console里面总会报别的菜单接口里的错 看的很心烦 于是想优化一下 就有了这篇文章 在切换菜单的时候取消所有未完成接口的请求

1.找到自己的请求拦截器 重点是 config.cancelToken = global.store.source.token;

http.interceptors.request.use(config => {
 config.cancelToken = global.store.source.token;
 return config
}, err => {
 return Promise.reject(err)
})

2.找到自己全局文件夹我的是global.js

global.store = {
 source: {
  token: null,
  cancel: null
 }
}

3.路由

router.beforeEach((to, from, next) => {
 // ...此处其他代码省略
 // 切换路由时清空上个路由未完成的所有请求
 const CancelToken = axios.CancelToken
 global.store.source.cancel && global.store.source.cancel()
 global.store.source = CancelToken.source()
 next()
})

补充知识:父组件如何获取子组件数据,子组件如何获取父组件数据,父子组件如何传值

1、父组件如何主动获取子组件的数据

方案1:$children

$children用来访问子组件实例,要知道一个组件的子组件可能是不唯一的,所以它的返回值是个数组

定义Header、HelloWorld两个组件

<template>
 <div class="index">
 <Header></Header>
 <HelloWorld :message="message"></HelloWorld>
 <button @click="goPro">跳转</button>
 </div>
</template>
mounted(){
 console.log(this.$children)
}

打印的是个数组,可以用foreach分别得到所需要的数据

缺点:

无法确定子组件的顺序,也不是响应式的

方案2: $refs

<HelloWorld ref="hello" :message="message"></HelloWorld>

调用hellworld子组件的时候直接定义一个ref,这样就可以通过this.$refs获取所需要的数据。

this.$refs.hello.属性

this.$refs.hello.方法

2.子组件如何主动获取父组件中的数据

通过$parent

parent用来访问父组件实例,通常父组件都是唯一确定的,跟children类似

this.$parent.属性

this.$parent.方法

父子组件通信除了以上三种,还有props和emit。此外还有inheritAttrs和attrs

3.inheritAttrs

这是2。4新增的属性和接口。inheritAttrs属性控制子组件html属性上是否显示父组件提供的属性。

如果我们将父组件Index中的属性desc、ketsword、message三个数据传递到子组件HelloWorld中的话,如下

父组件Index部分

<HelloWorld ref="hello" :desc="desc" :keysword="keysword" :message="message"></HelloWorld>

子组件:HelloWorld,props中只接受了message

props:{
 message: String 
}

实际情况,我们只需要message,那其他两个属性则会被当作普通的html元素插在子组件的根元素上

vue切换菜单取消未完成接口请求的案例

这样做会使组件预期功能变得模糊不清,这个时候,在子组件中写入,inheritAttrs:false,这些没用到的属性便会被去掉,true的话,就会显示。

props:{
 message: String 
},
inheritAttrs:false

如果父组件没被需要的属性,跟子组件本来的属性冲突的时候

<HelloWorld ref="hello" type="text" :message="message"></HelloWorld>

子组件:helloworld

<template>
 <input type="number">
</template>

这个时候父组件中type="text",而子组件中type="number",而实际中最后显示的是type="text",这并不是我们想要的,所以只要设置inheritAttrs:false,type便会成为number。

那么上述这些没被用到的属性,如何被获取。这就用到了$attrs

3.$attrs

作用:可以获取到没有使用的注册属性,如果需要,我们在这也可以往下继续传递。

就上述没有用到的desc和keysword就能通过$attrs获取到

通过$attr的这个特性可以父组件传递到子组件,免除父组件传递到子组件,再从子组件传递到孙组建的麻烦

父组件Index部分

<div class="index">
 <HelloWorld ref="hello" :desc="desc" :keysword="keysword" :message="message"></HelloWorld>
</div>

子组件helloworld部分

<div class="hello">
 <sunzi v-bind="$attrs"></sunzi>
 <button @click="aa">获取父组件的数据</button>
</div>

孙组建

<template>
 <div class="header">
 {{$attrs}}
 <br>
 </div>
</template>

可以看出通过v-bind="$attrs"将数组传到孙组建中

除了以上,provide/inject也适用于隔代组件通信,尤其是获取祖先组建的数据,非常方便

provide 选项应该是一个对象或返回一个对象的函数

provide:{
 for:'demo' 
}
inject:['for']

以上这篇vue切换菜单取消未完成接口请求的案例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery jqPlot API 中文使用教程(非常强大的图表工具)
Aug 15 Javascript
固定网页背景图同时保持图片比例的思路代码
Aug 15 Javascript
Jquery 切换不同图片示例代码
Dec 05 Javascript
表单input项使用label同时引用Bootstrap库导致input点击效果区增大问题
Oct 11 Javascript
写jQuery插件时的注意点
Feb 20 Javascript
vue之数据交互实例代码
Jun 20 Javascript
bootstrap多层模态框滚动条消失的问题
Jul 21 Javascript
详解Ant Design of React的安装和使用方法
Dec 27 Javascript
JS/jQuery实现简单的开关灯效果【案例】
Feb 19 jQuery
Vue动态路由缓存不相互影响的解决办法
Feb 19 Javascript
vue+element-ui+axios实现图片上传
Aug 20 Javascript
Vue环境搭建+VSCode+Win10的详细教程
Aug 19 Javascript
在vue中嵌入外部网站的实现
Nov 13 #Javascript
如何基于viewport vm适配移动端页面
Nov 13 #Javascript
VueCli生产环境打包部署跨域失败的解决
Nov 13 #Javascript
Vue使用Proxy代理后仍无法生效的解决
Nov 13 #Javascript
vue iview 隐藏Table组件里的某一列操作
Nov 13 #Javascript
详解Java中String JSONObject JSONArray List转换
Nov 13 #Javascript
vue print.js打印支持Echarts图表操作
Nov 13 #Javascript
You might like
PHP使用mysql与mysqli连接Mysql数据库用法示例
2016/07/07 PHP
PHP中检查isset()和!empty()函数的必要性
2019/02/13 PHP
YII2框架中查询生成器Query()的使用方法示例
2020/03/18 PHP
tp5.1 框架查询表达式用法详解
2020/05/25 PHP
PHP实现文件上传与下载
2020/08/28 PHP
重构Javascript代码示例(重构前后对比)
2013/01/23 Javascript
定时器(setTimeout/setInterval)调用带参函数失效解决方法
2013/03/26 Javascript
javascript垃圾收集机制与内存泄漏详细解析
2013/11/11 Javascript
创建、调用JavaScript对象的方法集锦
2014/12/24 Javascript
Javascript 拖拽雏形(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
JavaScript实现Iterator模式实例分析
2015/06/09 Javascript
Angular2 路由问题修复详解
2017/03/01 Javascript
angular+webpack2实战例子
2017/05/23 Javascript
jQuery实现ajax的嵌套请求案例分析
2019/02/16 jQuery
如何优雅地在Node应用中进行错误异常处理
2019/11/25 Javascript
Pyhton中防止SQL注入的方法
2015/02/05 Python
Python使用PIL库实现验证码图片的方法
2016/03/11 Python
Python使用一行代码获取上个月是几月
2018/08/30 Python
Python3实现的旋转矩阵图像算法示例
2019/04/03 Python
Python数据类型之Tuple元组实例详解
2019/05/08 Python
Windows下实现将Pascal VOC转化为TFRecords
2020/02/17 Python
python3 循环读取excel文件并写入json操作
2020/07/14 Python
HTML5中使用postMessage实现Ajax跨域请求的方法
2016/04/19 HTML / CSS
美国中小型企业领先的办公家具供应商:Office Designs
2016/11/26 全球购物
Mytheresa美国官网:德国知名的女性奢侈品电商
2017/05/27 全球购物
ROSEFIELD手表荷兰官方网上商店:北欧极简设计女士腕表品牌
2018/01/24 全球购物
什么是ESB?请介绍一下ESB?
2015/05/27 面试题
会计顶岗实习心得
2014/01/25 职场文书
乡镇党建工作汇报材料
2014/08/14 职场文书
员工试用期自我评价
2014/09/18 职场文书
2014年学生会个人工作总结
2014/11/07 职场文书
标准演讲稿格式结尾应该怎么书写?
2019/07/17 职场文书
python爬虫selenium模块详解
2021/03/30 Python
老生常谈 使用 CSS 实现三角形的技巧(多种方法)
2021/04/13 HTML / CSS
linux下安装redis图文详细步骤
2021/12/04 Redis
Pandas实现DataFrame的简单运算、统计与排序
2022/03/31 Python