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


Posted in Javascript onJuly 30, 2018

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

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,请告诉我)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS 用6N±1法求素数 实例教程
Oct 20 Javascript
jQuery实现的支持IE的html滑动条
Mar 16 Javascript
JavaScript实现模仿桌面窗口的方法
Jul 18 Javascript
通用无限极下拉菜单的实现代码
May 31 Javascript
终于实现了!精彩的jquery弹幕效果
Jul 18 Javascript
js控制台输出的方法(详解)
Nov 26 Javascript
原生JS和jQuery操作DOM对比总结
Jan 19 Javascript
jQuery快速高效制作网页交互特效
Feb 24 Javascript
React组件重构之嵌套+继承及高阶组件详解
Jul 19 Javascript
bootstrap实现tab选项卡切换
Aug 09 Javascript
uniapp开发小程序实现滑动页面控制元素的显示和隐藏效果
Dec 10 Javascript
vue判断按钮是否可以点击
Apr 09 Vue.js
JS实现HTML页面中动态显示当前时间完整示例
Jul 30 #Javascript
JS实现DOM节点插入操作之子节点与兄弟节点插入操作示例
Jul 30 #Javascript
js+html5实现手机九宫格密码解锁功能
Jul 30 #Javascript
vscode中vue-cli项目es-lint的配置方法
Jul 30 #Javascript
JavaScript树的深度优先遍历和广度优先遍历算法示例
Jul 30 #Javascript
JavaScript笛卡尔积超简单实现算法示例
Jul 30 #Javascript
angular-tree-component的使用详解
Jul 30 #Javascript
You might like
php基本函数汇总
2015/07/09 PHP
php简单获取复选框值的方法
2016/05/11 PHP
laravel框架使用极光推送消息操作示例
2020/02/15 PHP
超级强大的表单验证
2006/06/26 Javascript
20款超赞的jQuery插件 Web开发人员必备
2011/02/26 Javascript
jquery插件如何使用 jQuery操作Cookie插件使用介绍
2012/12/15 Javascript
javascript面向对象包装类Class封装类库剖析
2013/01/24 Javascript
jQuery+css+html实现页面遮罩弹出框
2013/03/21 Javascript
js控制输入框获得和失去焦点时状态显示的方法
2015/01/30 Javascript
解决微信内置浏览器返回上一页强制刷新问题方法
2017/02/05 Javascript
详解为Bootstrap Modal添加拖拽的方法
2018/01/05 Javascript
vue实现a标签点击高亮方法
2018/03/17 Javascript
通过一次报错详细谈谈Point事件
2018/05/17 Javascript
解析vue路由异步组件和懒加载案例
2018/06/08 Javascript
详解Angular如何正确的操作DOM
2018/07/06 Javascript
vue基于viewer实现的图片查看器功能
2019/04/12 Javascript
vue.js高德地图实现热点图代码实例
2019/04/18 Javascript
Selenium执行Javascript脚本参数及返回值过程详解
2020/04/01 Javascript
jquery绑定事件 bind和on的用法与区别分析
2020/05/22 jQuery
echarts饼图各个板块之间的空隙如何实现
2020/12/01 Javascript
[05:07]DOTA2英雄梦之声_第14期_暗影恶魔
2014/06/20 DOTA
Python实现的json文件读取及中文乱码显示问题解决方法
2018/08/06 Python
python调用百度语音REST API
2018/08/30 Python
3行Python代码实现图像照片抠图和换底色的方法
2019/10/10 Python
keras CNN卷积核可视化,热度图教程
2020/06/22 Python
PyCharm 2020.2下配置Anaconda环境的方法步骤
2020/09/23 Python
python不同版本的_new_不同点总结
2020/12/09 Python
PHP如何与mysql建立链接
2013/05/05 面试题
车辆维修工自我评价怎么写
2013/09/20 职场文书
平面设计师的工作职责
2013/11/21 职场文书
《在山的那边》教学反思
2014/02/23 职场文书
家长会演讲稿
2014/04/26 职场文书
售后客服个人自我评价
2014/09/14 职场文书
公司保洁员岗位职责
2015/02/13 职场文书
刑事上诉状(量刑过重)
2015/05/23 职场文书
防溺水主题班会教案
2015/08/12 职场文书