AXIOS simple implementation of a small program delay loading instruction

AXIOS simple implementation of small program delay loging instructions

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

wx.showLoading method for small programs and small games believe that everyone will not be strange, but how to deal with Loading Better user experience?

Assume that the demand is as follows, and the 1 second class request does not correspond to the corresponding load, otherwise it will not pop up, when the request is wrong, pop up toast.

Mix the AXIOS implementation is as follows:



  export const loadingStatus $: BehaviorSubject  = new BehaviorSubject  (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) returnrate => { LoadingStatus $ .next (false) wx.showtoast ({Title: 'Something Wrong Happened, please try it latr'} Return Promise.reject (Error)}}  


 Let Timer: Any = 0LoadingStatus $ .pipe (Pairwise (), Filter Res: array ) => {if (res [0]! == res [1]) {return true}}, map ((res: array ) => {Return Res [1]}),). Subscribe ((res: boolean) => {// overce Changed, value must be distinct if (time === 0) {TIMER = setTimeout (() => {wx.showloading {Title: 'loading ...'}}}, 1000)} Else {Cleartimeout (Timer) Timer = 0 wx.hideloading ()}})   
Feeling RX, many complex functions can be implemented very simple, and this feature will accompany the entire application cycle, so unsbscribe can not be too much. (Unless other than other Bad Effect, please tell me)


The above is all the content of this article, I hope to help everyone, I hope everyone supports Tumi Cloud.

© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment