axios簡單實現(xiàn)小程序延時loading指示
更新時間：2018年07月30日 13:39:47 作者：杜帥在掘金
這篇文章主要介紹了axios簡單實現(xiàn)小程序延時loading指示，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
axios簡單實現(xiàn)小程序延時loading指示
小程序和小游戲的wx.showLoading方法相信大家都不會陌生，但是怎樣處理loading才能又更好的用戶體驗呢？
假設需求如下，1秒類請求沒有相應，才彈出loading，否則不彈出，請求錯誤時，彈出toast。
配合axios實現(xiàn)如下：
1.在狀態(tài)管理部分存儲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.在應用啟動時訂閱
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()
}
})
感覺配合rx，很多復雜功能都能很簡單地實現(xiàn)，另外這個功能會伴隨整個應用周期，所以unsbscribe可以不用太在意。（除非有其他的bad effect，請告訴我）
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
Vue.js作為目前最熱門最具前景的前端框架之一,其提供了一種幫助我們快速構建并開發(fā)前端項目的新的思維模式,下面這篇文章主要給大家介紹了關于如何基于Vue制作一個猜拳小游戲的相關資料,需要的朋友可以參考下2023-01-01
在Vue中使用this.$store或者是$route一直報錯的解決
今天小編就為大家分享一篇在Vue中使用this.$store或者是$route一直報錯的解決，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要為大家詳細介紹了vue實現(xiàn)搜索功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-05-05
這篇文章主要介紹了vue 封裝面包屑組件教程，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
下面小編就為大家分享一篇vue實現(xiàn)模態(tài)框的通用寫法推薦，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
這篇文章主要介紹了使用Vue實現(xiàn)一個樹組件的示例，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-11-11
這篇文章主要介紹了Vue.js 加入高德地圖的實現(xiàn)方法,本文結合示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-12-12
vue-cli history模式實現(xiàn)tomcat部署報404的解決方式
這篇文章主要介紹了vue-cli history模式實現(xiàn)tomcat部署報404的解決方式,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-09-09
今天小編就為大家分享一篇vue-router之實現(xiàn)導航切換過渡動畫效果，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
Token是身份驗證后服務端返回的令牌,常用于訪問授權API和頁面權限校驗,Token數(shù)據(jù)可存儲在本地或Vuex中,本地存儲可實現(xiàn)數(shù)據(jù)持久化,這篇文章主要介紹了vue登錄成功之后的token處理詳細步驟,需要的朋友可以參考下2024-10-10