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 相关文章推荐
jquery ajax例子返回值详解
Sep 11 Javascript
node.js中的fs.lchmod方法使用说明
Dec 16 Javascript
JavaScript获取页面中第一个锚定文本的方法
Apr 03 Javascript
jQuery寻找n以内完全数的方法
Jun 24 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(一)
May 17 Javascript
JavaScript实现九九乘法表的简单实例
Jun 07 Javascript
BootStrap 弹出层代码
Feb 09 Javascript
AngularJS实现单一页面内设置跳转路由的方法
Jun 28 Javascript
javascript基于牛顿迭代法实现求浮点数的平方根【递归原理】
Sep 28 Javascript
原生js实现省市区三级联动代码分享
Feb 12 Javascript
微信小程序封装的HTTP请求示例【附升级版】
May 11 Javascript
Vue Object 的变化侦测实现代码
Apr 15 Javascript
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
为了这两部电子管收音机,买了6套全新电子管和10粒刻度盘灯泡
2021/03/02 无线电
php !function_exists(&quot;T7FC56270E7A70FA81A5935B72EACBE29&quot;))代码解密
2011/01/07 PHP
让PHP以ROOT权限执行系统命令的方法
2011/02/10 PHP
php代码书写习惯优化小结
2013/06/20 PHP
php 判断字符串中是否包含html标签
2014/02/17 PHP
php删除指定目录的方法
2015/04/03 PHP
WordPress中用于更新伪静态规则的PHP代码实例讲解
2015/12/18 PHP
js验证表单第二部分
2006/11/25 Javascript
最新优化收藏到网摘代码(digg,diigo)
2007/02/07 Javascript
jQuery 1.9.1源码分析系列(十四)之常用jQuery工具
2015/12/02 Javascript
全面解析Bootstrap中transition、affix的使用方法
2016/05/30 Javascript
JS去除空格和换行的正则表达式(推荐)
2016/06/14 Javascript
纯JS前端实现分页代码
2016/06/21 Javascript
通过bootstrap全面学习less
2016/11/09 Javascript
jquery单击文字或图片内容放大并居中显示
2017/06/23 jQuery
基于JavaScript实现微信抢红包功能
2017/07/20 Javascript
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
2017/09/20 jQuery
Vue.js实现的表格增加删除demo示例
2018/05/22 Javascript
JS实现仿微信支付弹窗功能
2018/06/25 Javascript
使用 node.js 模仿 Apache 小部分功能
2019/07/07 Javascript
使用uni-app开发微信小程序的实现
2019/12/13 Javascript
vue实现登录拦截
2020/06/29 Javascript
解决vue-photo-preview 异步图片放大失效的问题
2020/07/29 Javascript
在Uni中使用Vue的EventBus总线机制操作
2020/07/31 Javascript
解决新建一个vue项目过程中遇到的问题
2020/10/22 Javascript
Python FTP两个文件夹间的同步实例代码
2018/05/25 Python
对python多线程中Lock()与RLock()锁详解
2019/01/11 Python
Django模型修改及数据迁移实现解析
2019/08/01 Python
css3的@media属性实现页面响应式布局示例代码
2014/02/10 HTML / CSS
Camille Jewelry官网:现代女性时尚首饰
2019/07/07 全球购物
美国Max仓库:Max Warehouse
2020/05/31 全球购物
临床医学专业学生的自我评价分享
2013/11/21 职场文书
软件项目经理岗位职责
2015/04/01 职场文书
2016年党员干部廉政承诺书
2016/03/24 职场文书
导游词之阆中古城
2019/12/23 职场文书
Vue全家桶入门基础教程
2021/05/14 Vue.js