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 相关文章推荐
js生成随机数之random函数随机示例
Dec 20 Javascript
JS实现在线统计一个页面内鼠标点击次数的方法
Feb 28 Javascript
jQuery使用addClass()方法给元素添加多个class样式
Mar 26 Javascript
javascript中innerText和innerHTML属性用法实例分析
May 13 Javascript
简单实现js页面切换功能
Jan 10 Javascript
Vue 创建组件的两种方法小结(必看)
Feb 23 Javascript
Javascript实现时间倒计时功能
Nov 17 Javascript
JS实现获取自定义属性data值的方法示例
Dec 19 Javascript
jQuery添加新内容的四个常用方法分析【append,prepend,after,before】
Mar 19 jQuery
记录vue项目中遇到的一点小问题
May 14 Javascript
JS算法题之查找数字在数组中的索引位置
May 15 Javascript
关于AngularJS中几种Providers的区别总结
May 17 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
模拟xcopy的函数
2006/10/09 PHP
基于mysql的论坛(1)
2006/10/09 PHP
php 全文搜索和替换的实现代码
2008/07/29 PHP
通过修改referer下载文件的方法
2008/05/11 Javascript
基于jquery的loading效果实现代码
2010/11/05 Javascript
SOSO地图JS画出标注和中心点以html形式运行
2013/08/09 Javascript
js键盘事件的keyCode
2014/07/29 Javascript
JavaScript字符串对象charAt方法入门实例(用于取得指定位置的字符)
2014/10/17 Javascript
jquery队列函数用法实例
2014/12/16 Javascript
JavaScript调试的多个必备小Tips
2017/01/15 Javascript
JS实现微信里判断页面是否被分享成功的方法
2017/06/06 Javascript
JS实现的ajax和同源策略(实例讲解)
2017/12/01 Javascript
Vue 莹石摄像头直播视频实例代码
2018/08/31 Javascript
js设置鼠标悬停改变背景色实现详解
2019/06/26 Javascript
Using Django with GAE Python 后台抓取多个网站的页面全文
2016/02/17 Python
Python多线程实现同步的四种方式
2017/05/02 Python
利用python的socket发送http(s)请求方法示例
2018/05/07 Python
浅谈python写入大量文件的问题
2018/11/09 Python
python处理excel绘制雷达图
2019/10/18 Python
利用setuptools打包python程序的方法步骤
2020/01/18 Python
keras 权重保存和权重载入方式
2020/05/21 Python
基于nexus3配置Python仓库过程详解
2020/06/15 Python
一文详述 Python 中的 property 语法
2020/09/01 Python
Python Tkinter实例——模拟掷骰子
2020/10/24 Python
Python urllib3软件包的使用说明
2020/11/18 Python
美国在线珠宝商店:SZUL
2017/02/11 全球购物
法国在线药房:DoctiPharma
2020/10/21 全球购物
公司领导推荐信
2013/11/12 职场文书
科研课题实施方案
2014/03/18 职场文书
双方协议书
2014/04/22 职场文书
会计专业毕业生自荐书
2014/06/25 职场文书
买房子个人收入证明
2014/10/12 职场文书
九华山导游词
2015/02/03 职场文书
3.15消费者权益日活动总结
2015/02/09 职场文书
幼师个人总结范文
2015/02/28 职场文书
大学学生会辞职信
2015/05/13 职场文书