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