当前位置： 移动技术网 > IT编程>脚本编程>vue.js > axios简单实现小程序延时loading指示

axios简单实现小程序延时loading指示

2018年08月08日  | 移动技术网IT编程  | 我要评论

axios简单实现小程序延时loading指示

小程序和小游戏的wx.showloading方法相信大家都不会陌生，但是怎样处理loading才能又更好的用户体验呢？

假设需求如下，1秒类请求没有相应，才弹出loading，否则不弹出，请求错误时，弹出toast。

配合axios实现如下：

1.在状态管理部分存储loading状态

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，很多复杂功能都能很简单地实现，另外这个功能会伴随整个应用周期，所以unsbscribe可以不用太在意。（除非有其他的bad effect，请告诉我）

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网