axios简单实现小程序延时加载指示
小程序和小游戏的wx.showLoading方法相信大家都不会陌生,但是怎样处理加载才能又更好的用户体验呢?
假设需求如下,1秒类请求没有相应,才弹出加载,否则不弹出,请求错误时,弹出面包。
配合axios实现如下:
1。在状态管理部分存储加载状态
出口const loadingStatus美元:BehaviorSubject=new BehaviorSubject(假)
axios.interceptors.request.use (
(配置:任何)=比;{
loadingStatus $ . next(真正的)
返回配置
}，
(错误:有)=比;{
返回Promise.reject(错误)
}，
)
axios.interceptors.response.use (
(回应:任何)=比;{
loadingStatus $ . next(假)
返回response.data
}，
(错误:有)=比;{
loadingStatus $ . next(假)
wx。showToast({标题:“错误的事情发生了,请稍后尝试”})
返回Promise.reject(错误)
}，
)
之前
2。在应用启动时订阅
让计时器:任何=0
loadingStatus美元
.pipe (
成对(),
过滤器((res: Array之前
感觉配合rx,很多复杂功能都能很简单地实现,另外这个功能会伴随整个应用周期,所以unsbscribe可以不用太在意。(除非有其他的不良影响,请告诉我)
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
