在做別的功能時(shí) console里面總會(huì)報(bào)別的菜單接口里的錯(cuò) 看的很心煩 于是想優(yōu)化一下 就有了這篇文章 在切換菜單的時(shí)候取消所有未完成接口的請(qǐng)求

1.找到自己的請(qǐng)求攔截器 重點(diǎn)是 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) => {
 // ...此處其他代碼省略
 // 切換路由時(shí)清空上個(gè)路由未完成的所有請(qǐng)求
 const CancelToken = axios.CancelToken
 global.store.source.cancel && global.store.source.cancel()
 global.store.source = CancelToken.source()
 next()
})

補(bǔ)充知識(shí)：父組件如何獲取子組件數(shù)據(jù)，子組件如何獲取父組件數(shù)據(jù)，父子組件如何傳值

1、父組件如何主動(dòng)獲取子組件的數(shù)據(jù)

方案1：$children

$children用來(lái)訪問(wèn)子組件實(shí)例，要知道一個(gè)組件的子組件可能是不唯一的，所以它的返回值是個(gè)數(shù)組

定義Header、HelloWorld兩個(gè)組件

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

打印的是個(gè)數(shù)組，可以用foreach分別得到所需要的數(shù)據(jù)

缺點(diǎn)：

無(wú)法確定子組件的順序，也不是響應(yīng)式的

方案2： $refs

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

調(diào)用hellworld子組件的時(shí)候直接定義一個(gè)ref，這樣就可以通過(guò)this.$refs獲取所需要的數(shù)據(jù)。

this.$refs.hello.屬性

this.$refs.hello.方法

2.子組件如何主動(dòng)獲取父組件中的數(shù)據(jù)

通過(guò)$parent

parent用來(lái)訪問(wèn)父組件實(shí)例，通常父組件都是唯一確定的，跟children類(lèi)似

this.$parent.屬性

this.$parent.方法

父子組件通信除了以上三種，還有props和emit。此外還有inheritAttrs和attrs

3.inheritAttrs

這是2。4新增的屬性和接口。inheritAttrs屬性控制子組件html屬性上是否顯示父組件提供的屬性。

如果我們將父組件Index中的屬性desc、ketsword、message三個(gè)數(shù)據(jù)傳遞到子組件HelloWorld中的話，如下

父組件Index部分

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

子組件：HelloWorld，props中只接受了message

props:{
 message: String 
}

實(shí)際情況，我們只需要message，那其他兩個(gè)屬性則會(huì)被當(dāng)作普通的html元素插在子組件的根元素上

這樣做會(huì)使組件預(yù)期功能變得模糊不清，這個(gè)時(shí)候，在子組件中寫(xiě)入,inheritAttrs:false，這些沒(méi)用到的屬性便會(huì)被去掉，true的話，就會(huì)顯示。

props:{
 message: String 
},
inheritAttrs:false

如果父組件沒(méi)被需要的屬性，跟子組件本來(lái)的屬性沖突的時(shí)候

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

子組件：helloworld

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

這個(gè)時(shí)候父組件中type="text"，而子組件中type="number"，而實(shí)際中最后顯示的是type="text"，這并不是我們想要的，所以只要設(shè)置inheritAttrs:false，type便會(huì)成為number。

那么上述這些沒(méi)被用到的屬性，如何被獲取。這就用到了$attrs

3.$attrs

作用：可以獲取到?jīng)]有使用的注冊(cè)屬性，如果需要，我們?cè)谶@也可以往下繼續(xù)傳遞。

就上述沒(méi)有用到的desc和keysword就能通過(guò)$attrs獲取到

通過(guò)$attr的這個(gè)特性可以父組件傳遞到子組件，免除父組件傳遞到子組件，再?gòu)淖咏M件傳遞到孫組建的麻煩

父組件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">獲取父組件的數(shù)據(jù)</button>
</div>

孫組建

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

可以看出通過(guò)v-bind="$attrs"將數(shù)組傳到孫組建中

除了以上，provide/inject也適用于隔代組件通信，尤其是獲取祖先組建的數(shù)據(jù)，非常方便

provide 選項(xiàng)應(yīng)該是一個(gè)對(duì)象或返回一個(gè)對(duì)象的函數(shù)

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

以上這篇vue切換菜單取消未完成接口請(qǐng)求的案例就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論