axios 는 애플 릿 지연 로 딩 지 시 를 간단하게 실현 합 니 다.

axios 는 애플 릿 지연 로 딩 지 시 를 간단하게 실현 합 니 다.

애플 릿 과 작은 게임 의 wx.show Loading 방법 은 모두 가 낯 설 지 않 을 것 이 라 고 믿 습 니 다.하지만 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 가 없 는 한 알려 주세요)
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.