axios簡單實現(xiàn)小程序延時loading指示
更新時間：2018年07月30日 13:39:47 作者：杜帥在掘金
這篇文章主要介紹了axios簡單實現(xiàn)小程序延時loading指示，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
axios簡單實現(xiàn)小程序延時loading指示
小程序和小游戲的wx.showLoading方法相信大家都不會陌生，但是怎樣處理loading才能又更好的用戶體驗?zāi)兀?/p>
假設(shè)需求如下，1秒類請求沒有相應(yīng)，才彈出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.在應(yīng)用啟動時訂閱
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，很多復(fù)雜功能都能很簡單地實現(xiàn)，另外這個功能會伴隨整個應(yīng)用周期，所以unsbscribe可以不用太在意。（除非有其他的bad effect，請告訴我）
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
在Vue的模板語法中,我們學(xué)了很多指令,當(dāng)然除了這些指令,Vue也允許我們自己定義自己的指令,所以本文就來和大家聊聊如何使用自定義指令吧2023-10-10
本文主要介紹了el-form的model、prop屬性和表單校驗等使用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
這篇文章主要為大家介紹了npm run dev報錯信息及解決方法,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09
Vue動態(tài)修改網(wǎng)頁標(biāo)題的方法及遇到問題
Vue下有很多的方式去修改網(wǎng)頁標(biāo)題，這里總結(jié)下解決此問題的幾種方案:,需要的朋友可以參考下2019-06-06
vue實現(xiàn)高德地圖添加多個點(diǎn)標(biāo)記
地圖多點(diǎn)標(biāo)注其實是個非常簡單的問題,這篇文章主要給大家介紹了關(guān)于vue實現(xiàn)高德地圖添加多個點(diǎn)標(biāo)記的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
el-table實現(xiàn)轉(zhuǎn)置表格的示例代碼(行列互換)
這篇文章主要介紹了el-table實現(xiàn)轉(zhuǎn)置表格的示例代碼(行列互換),本文結(jié)合示例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-02-02
今天小編就為大家分享一篇vue 實現(xiàn)移動端鍵盤搜索事件監(jiān)聽，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
在項目中使用自定義字體可以提升頁面的視覺效果,并確保在不同設(shè)備上的一致性,文中通過代碼示例給出了具體的操作步驟,對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-06-06
這篇文章主要為大家詳細(xì)介紹了vue開發(fā)拖拽進(jìn)度條滑動組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
本文將探討 props 驗證失敗的常見原因,并提供解決方法,幫助開發(fā)者在 Vue 組件開發(fā)中避免這些問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-03-03