富贵资源网 Design By www.hznty.com

在做别的功能时 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切换菜单取消未完成接口请求的案例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

富贵资源网 Design By www.hznty.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
富贵资源网 Design By www.hznty.com

P70系列延期,华为新旗舰将在下月发布

3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。

而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?

根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。