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

2024-12-03 21:20:34

小程序和小游戏的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，请告诉我）

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

基于Vue实现微信小程序的图文编辑器

由于微信小程序不能使用常规的图文编辑器(比如百度的UEditor )编辑新闻内容之类的,所以用vue写了个针对小程序用的图文编辑器.效果如下多图上传图片用到了 ajaxfileupload.js (不知道哪位仁兄写的,拿来用了,很好用) 最终形成一串Json数据(转成字符串,传入后台存入数据库,小程序端用JSON.parse 转成JSON ,按照后台一样的方式渲染即可[小程序端代码还没写,后面再贴出来吧]) json格式如 [{"mytype":1,"content&qu
微信小程序动态生成二维码的实现代码

效果图如下: 实现 wxml  <view class='container'> <image bindtap="previewImg" mode="scaleToFill" src="{{imagePath}}"></image> </view>  <view class=&qu
详解如何在微信小程序中愉快地使用sass

前言在微信小程序中,css是用wxss来表示,但写法基本一致.需要注意的是wxss扩展了两个特性,分别是: 尺寸单位样式导入具体可参考wxss,此处不做过多赘述. 为了方便打包sass,我们使用gulp来处理我们的scss文件,将其转换为wxss. 目录结构在开发中,我们一般会有一个src源代码目录,一个dist目录用来输出我们打包的代码.而本次讲解用到的目录结构如下: build目录用来配置我们的打包参数,目前里面只有一个config.js文件 dist目录为打包输出的目录,也是小程序
微信小程序实现指定显示行数多余文字去掉用省略号代替

效果图实现 wxml <view class='goods-details'> <text class='goods-details-title'>商品详情</text> <text catchtap='showAllAction' class='goods-details-content {{isShowAllContent ?"content-all" :"content-breif"}}'>你如安好,便是晴天你
详解mpvue开发小程序小总结

最近用mpvue开发了一个小程序,现总结一下碰见的问题及解决方案 1.项目中数据请求用到了fly.io,封装成request.js如下: import wx from 'wx' import Fly from 'flyio' import store from '../store/index' const fly = new Fly() fly.config.baseURL = process.env.BASE_URL fly.config.timeout = 5000 //http 请求拦截器
详解使用mpvue开发github小程序总结

前言最近有点闲,想起关注已久的mpvue写小程序,所以稍微肝了半个多月写了个github版的微信小程序,已上线.现在总结一下遇到的坑. 扫码体验. 项目地址:https://github.com/cheesekun/wx-github mina坑 scroll-view 高度可滚动视图区域. 使用竖向滚动时,需要给<scroll-view/>一个固定高度,通过 WXSS 设置 height. 小程序提供的scroll-view组件,想让他能滚动,就要给他提供一个固定的高度. 我们一般需求是
微信小程序实现滴滴导航tab切换效果

本文实例为大家分享了微信小程序实现tab切换效果的具体代码,供大家参考,具体内容如下效果图如下: (请自动忽视底部tab.....) 简单介绍一下:顶部导航使用 scroll-view 组件中间的内容部分使用 swiper 组件实现的逻辑就是: 先这样在这样,这样然后那样.(此处省略200个字). 代码如下,复制可用 wxml <view class="contain">  <scroll-view class="t
微信小程序实现图片上传放大预览删除代码

本文实例为大家分享了微信小程序图片上传放大预览的具体代码,供大家参考,具体内容如下效果: image.js代码: Page({ //选择相册或拍照 data: { imgs: [] }, //上传图片 chooseImg: function (e) { var that = this; var imgs = this.data.imgs; if (imgs.length >= 9) { this.setData({ lenMore: 1 }); setTimeout(function () {
axios简单实现小程序延时loading指示

axios简单实现小程序延时loading指示小程序和小游戏的wx.showLoading方法相信大家都不会陌生,但是怎样处理loading才能又更好的用户体验呢? 假设需求如下,1秒类请求没有相应,才弹出loading,否则不弹出,请求错误时,弹出toast. 配合axios实现如下: 1.在状态管理部分存储loading状态 export const loadingStatus$: BehaviorSubject<boolean> = new BehaviorSubject<boo
android Socket实现简单聊天小程序

android Socket实现简单聊天小程序,供大家参考,具体内容如下服务器端: package org.hwq.echo; import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; import java.io.PrintWriter; import java.net.ServerSocket; import java.net.Socket; public cla
使用Python制作简单的小程序IP查看器功能

前言说实话,查看电脑的IP,也挺无聊的,但是够简单,所以就从这里开始吧.IP地址在操作系统里就可以直接查看.但是除了IP地址,我们也想通过IP获取地理地址和网络运营商情况.IP地址和地理地址并没有固定的关系,所以我们需要借助网络上的数据库,或者说借助第三方的服务来查询.这里,我们选用IP.CN提供的IP地址查询服务. 基本环境配置版本:Python3 系统:Windows 相关模块:PyQt5 实现效果图完整代码运行以上程序,点击按钮,大约卡顿半秒后,文本标签处就会显示我们电脑的IP地址
java网络通信技术之简单聊天小程序

本文实例为大家分享了java实现简单聊天小程序的具体代码,供大家参考,具体内容如下再学习完java的通信技术后,做了一个简单的窗体聊天程序.程序非常简单,主要目的是当练习巩固自己所学的东西,在这里写出来记录以下.下面直接上代码. 首先是服务端代码: package ChatTwoPackage; import java.io.*; import java.net.*; public class ChatTwoServer { public ChatTwoServer(int port,Stri
Python简单基础小程序的实例代码

1 九九乘法表 for i in range(9):#从0循环到8 i += 1#等价于 i = i+1 for j in range(i):#从0循环到i j += 1 print(j,'*',i,'=',i*j,end = ' ',sep='') # end默认在结尾输出换行,将它改成空格 sep 默认 j,'*',i,'=',i*j 各元素输出中间会有空格 print()#这里作用是输出换行符 i = 1 while i <= 9: j = 1 while j <= i: print(&
Java实现简单计算器小程序

本文实例为大家分享了Java实现简单计算器小程序的具体代码,供大家参考,具体内容如下这学期没事学了一点点Java,想写个程序练手,因为只学了一点点,所以暂时只能先写个实现简单功能的计算器练练. 由于期末来了,没太多时间,所以暂时就实现最简单的功能. 个人不喜欢用大量文字记叙程序,而且该程序也相对简单,所以直接画了张程序框架图,再配合代码的注释,就明白程序的原理了. 图计算器程序框架代码如下: package tst.jframe; import java.awt.EventQueue; i
Python实现简单购物车小程序

本文实例为大家分享了Python实现简单购物车小程序的具体代码,供大家参考,具体内容如下要求代码 # --*--coding:utf-8--*-- # Author: 村雨 import pprint productList = [('Iphone 8', 10000), ('GTX2080', 8000), ('Z7KP7-GT', 6000), ('Mac pro', 15000),
拳皇（Java简单的小程序）代码实例

刚开始学习Java,看完老九君的视频根据他的内容敲的代码,感觉还挺有成就感的,毕竟刚学习Java. package helloasd;import java.util.*; public class hellojava { public static void main(String[] args) { Scanner input = new Scanner(System.in); System.out.print("输入名称: "); //用户自己输入名字 String userna
Java实现简单日历小程序 Java图形界面小日历开发

今天给大家介绍一下如何用Java swing开发一款简单的小日历,下面我们来看代码: 首先创建一个CalendarBean类,用于基本的日期计算: package other1; import java.util.Calendar; public class CalendarBean { String day[]; int year=2005,month=0; public void setYear(int year) { this.year=year; } public int getYear
PHP实现简单计算器小程序

最近刚开始学习一门新的语言 PHP,然后就写了一个计算器的小程序,大体上的思路就是有一个前台程序和一个后台程序,前台程序就是界面类似下图这样的: 然后还有一个后台程序,就是负责计算的,那么根据这个就来设计页面,基本上就是 HTML 的知识,首先添加一个 table,然后添加一个表单,这个表单就提交给当前的页面(当然也可以传给别的页面),剩下的也就没有什么问题了,其实个例子说明 PHP既可以作前台的事情,也可以干后台的事情. Code: <?php /** * Created by PhpStor

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

相关推荐

随机推荐