React + AntdMobile + Axios 實現全局Loading提示組件

1.問題：

　　開發項目時需要在接口等待期間調用一個Loading組件提示組件提示用戶操作已經受理；

　　最初的解決方案是在每一個調用了接口的頁面直接使用 AntdMobile 的活動指示器組件 <ActivityIndicator />，后續開發中發現該方案代碼冗余度太高並且屬於重復工作，查閱資料后決定在axios攔截器中進行一些處理以實現全局Loading提示組件；

2.解決方案：

　　使用 ReactDOM、AntdMobile 配合 Axios攔截器 實現一個全局Loading組件，調用接口時自動展示Loading；

　　React：ReactDOM.render()；

　　AntdMobile：<ActivityIndicator />；https://mobile.ant.design/components/activity-indicator-cn/

　　axios：interceptors；http://www.axios-js.com/zh-cn/docs/#%E6%8B%A6%E6%88%AA%E5%99%A8

配置axios

axios.js 

 

import React from 'react'
import { render } from 'react-dom'
import axios from 'axios'
import { ActivityIndicator, Toast } from 'antd-mobile'
import history from '@/utils/history'

var CancelToken = axios.CancelToken
var source = CancelToken.source()
let httpRequestCount = 0

const showLoading = () => {
  if (httpRequestCount === 0) {
    const loadingContainer = document.createElement('div')
    loadingContainer.setAttribute('id', 'axiosLoading')
    document.body.appendChild(loadingContainer)
    render(<ActivityIndicator toast text='Loading...' animating />, loadingContainer)
  }
  httpRequestCount++
}
const hideLoading = () => {
  httpRequestCount--
  if (httpRequestCount === 0) {
    document.querySelector('body').removeChild(document.querySelector('#axiosLoading'))
  }
}

axios.source = source

axios.interceptors.request.use(function (config) {
  showLoading()
  return config
}, handleError)

axios.interceptors.response.use(function responseInterceptor (response) {
  hideLoading()
  // Do something with response data
  if (response && response.status === 200 && response.data) {
    return handleRes(response.data)
  }
  if (response && response.status === 999 && response.data) {
    return handleRes(response.data)
  }
  return Promise.reject(response.data && response.data.responseMessage)
}, handleError)

function handleError (error) {
  hideLoading()
  history.push('/')
  return Promise.reject(error)
}

function handleRes (data) {
  return new Promise((resolve, reject) => {
    if (data && data.resultCode) {
      switch (data.resultCode) {
        case '0':
          return resolve(data)
        default:
          Toast.fail(data.resultDesc)
          return resolve(data)
      }
    } else {
      return resolve(data)
    }
  })
}

// ...

 

 

 

完成 axios的配置后在使用axios調用接口的等待期間則會吹出現提示信息和動畫；

若是需要在某些接口等待期間不進行提示可以在接口調用時增加配置項然后在axios攔截器中進行處理；

參考網址：https://segmentfault.com/a/1190000022195227