axios簡(jiǎn)單實(shí)現(xiàn)小程序延時(shí)loading指示
更新時(shí)間：2018年07月30日 13:39:47 作者：杜帥在掘金
這篇文章主要介紹了axios簡(jiǎn)單實(shí)現(xiàn)小程序延時(shí)loading指示，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
axios簡(jiǎn)單實(shí)現(xiàn)小程序延時(shí)loading指示
小程序和小游戲的wx.showLoading方法相信大家都不會(huì)陌生，但是怎樣處理loading才能又更好的用戶體驗(yàn)?zāi)兀?/p>
假設(shè)需求如下，1秒類請(qǐng)求沒(méi)有相應(yīng)，才彈出loading，否則不彈出，請(qǐng)求錯(cuò)誤時(shí)，彈出toast。
配合axios實(shí)現(xiàn)如下：
1.在狀態(tài)管理部分存儲(chǔ)loading狀態(tài)
export const loadingStatus$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false)
axios.interceptors.request.use(
(config: any) => {
loadingStatus$.next(true)
return config
},
(error: any) => {
return Promise.reject(error)
},
)
axios.interceptors.response.use(
(response: any) => {
loadingStatus$.next(false)
return response.data
},
(error: any) => {
loadingStatus$.next(false)
wx.showToast({ title: 'something wrong happened, please try it later' })
return Promise.reject(error)
},
)
2.在應(yīng)用啟動(dòng)時(shí)訂閱
let timer: any = 0
loadingStatus$
.pipe(
pairwise(),
filter((res: Array<boolean>) => {
if (res[0] !== res[1]) {
return true
} else {
return false
}
}),
map((res: Array<boolean>) => {
return res[1]
}),
)
.subscribe((res: boolean) => {
// once changed, value must be distinct
if (timer === 0) {
timer = setTimeout(() => {
wx.showLoading({ title: 'loading...' })
}, 1000)
} else {
clearTimeout(timer)
timer=0
wx.hideLoading()
}
})
感覺(jué)配合rx，很多復(fù)雜功能都能很簡(jiǎn)單地實(shí)現(xiàn)，另外這個(gè)功能會(huì)伴隨整個(gè)應(yīng)用周期，所以u(píng)nsbscribe可以不用太在意。（除非有其他的bad effect，請(qǐng)告訴我）
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue.js作為目前最熱門最具前景的前端框架之一,其提供了一種幫助我們快速構(gòu)建并開(kāi)發(fā)前端項(xiàng)目的新的思維模式,下面這篇文章主要給大家介紹了關(guān)于如何基于Vue制作一個(gè)猜拳小游戲的相關(guān)資料,需要的朋友可以參考下2023-01-01
在Vue中使用this.$store或者是$route一直報(bào)錯(cuò)的解決
今天小編就為大家分享一篇在Vue中使用this.$store或者是$route一直報(bào)錯(cuò)的解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)搜索功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-05-05
這篇文章主要介紹了vue 封裝面包屑組件教程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
vue實(shí)現(xiàn)模態(tài)框的通用寫(xiě)法推薦
下面小編就為大家分享一篇vue實(shí)現(xiàn)模態(tài)框的通用寫(xiě)法推薦，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
使用Vue實(shí)現(xiàn)一個(gè)樹(shù)組件的示例
這篇文章主要介紹了使用Vue實(shí)現(xiàn)一個(gè)樹(shù)組件的示例，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-11-11
這篇文章主要介紹了Vue.js 加入高德地圖的實(shí)現(xiàn)方法,本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-12-12
vue-cli history模式實(shí)現(xiàn)tomcat部署報(bào)404的解決方式
這篇文章主要介紹了vue-cli history模式實(shí)現(xiàn)tomcat部署報(bào)404的解決方式,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
vue-router之實(shí)現(xiàn)導(dǎo)航切換過(guò)渡動(dòng)畫(huà)效果
今天小編就為大家分享一篇vue-router之實(shí)現(xiàn)導(dǎo)航切換過(guò)渡動(dòng)畫(huà)效果，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10
Token是身份驗(yàn)證后服務(wù)端返回的令牌,常用于訪問(wèn)授權(quán)API和頁(yè)面權(quán)限校驗(yàn),Token數(shù)據(jù)可存儲(chǔ)在本地或Vuex中,本地存儲(chǔ)可實(shí)現(xiàn)數(shù)據(jù)持久化,這篇文章主要介紹了vue登錄成功之后的token處理詳細(xì)步驟,需要的朋友可以參考下2024-10-10