axios簡(jiǎn)單實(shí)現(xiàn)小程序延時(shí)loading指示

發(fā)布時(shí)間：2020-09-30 18:32:11 來源：腳本之家閱讀：141 作者：杜帥在掘金欄目：web開發(fā)

小程序和小游戲的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í)有所幫助，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

axios簡(jiǎn)單實(shí)現(xiàn)小程序延時(shí)loading指示

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽