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

栏目: jQuery · 发布时间: 6年前

内容简介:小程序和小游戏的wx.showLoading方法相信大家都不会陌生,但是怎样处理loading才能又更好的用户体验呢?假设需求如下,1秒类请求没有相应,才弹出loading,否则不弹出,请求错误时,弹出toast。配合axios实现如下:
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,请告诉我)


以上所述就是小编给大家介绍的《axios简单实现小程序延时loading指示》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

C++数据结构与算法

C++数据结构与算法

[美]乔兹德克(Adam Drozdek) / 徐丹、吴伟敏 / 清华大学出版社 / 2014-10-1 / 63.00元

本书全面系统地介绍了数据结构,并以C++语言实现相关的算法。书中主要强调了数据结构和算法之间的联系,使用面向对象的方法介绍数据结构,其内容包括算法的复杂度分析、链表、栈、队列、递归、二叉树、图、排序和散列。书中还清晰地阐述了同类教材中较少提到的内存管理、数据压缩和字符串匹配等主题。书中包含大量的示例分析和图形,便于读者进一步理解和巩固所学的知识。一起来看看 《C++数据结构与算法》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码