1, the background

  • Ajax requests are essential in project development
  • Some Ajax requests do not need loading or do not display loading if the request time is less than the specified time
  • Homogenization of requests within a project (error handling, return data formatting, loading, token handling)
  • The configuration is based on the personal VUE project. Vux-related components are loaded and some dependent imports are made (can be configured as needed).
import Vue from 'vue'
import axios from 'axios'// Read host import config from for some environment configuration parameters of the project'@/config'Vuex state management, which controls global loading import store from'@/store'// Vue-router Page operations on the corresponding status code (router instance) import router from'@/router'//console corresponds to the package import {log } from '@/utils'Copy the code

2. Solutions

We define several parameters to declare in the wrapper of AXIos

// Min loading time const MINI_TIME = 300letTIME_OUT_MAX = 5000 // Environment valuelet_env = process.env.node_env // Requests interface hostlet_apiHost = config. APIlet _requests = []Copy the code

Generally, root host and content-type in a project are unified, and axiOS is configured uniformly (if the back end needs formData form, content-Type =’application/ X-www-form-urlencoded; Charset = utF-8 ‘; char = utF-8 ‘; char = utF-8 ‘;

axios.defaults.headers.common['Content-Type'] = 'application/json'
axios.defaults.baseURL = _apiHostCopy the code

Typically, there will be more than one request in progress (not yet returned) in a project at any one time. To determine whether ajax is currently in progress, you need to maintain the _requests array.

/** * To add a request, loading * @param {request configuration} config */function pushRequest(config) {
  log(`${config.url}--begin`)
  _requests.push(config)
  Vue.$vux.loading.show({
    text: 'Loading'
  })
  store.dispatch('loading'} /** * remove loading, disable loading * @param {request configuration} config */function popRequest(config) {
  log(`${config.url}--end`)
  let _index = _requests.findIndex(r => {
    return r === config
  })
  if (_index > -1) {
    _requests.splice(_index, 1)
  }
  if(! _requests.length) { Vue.$vux.loading.hide(0)
    store.dispatch('loading'.false)}}Copy the code

The next step is to process axios based on the above preparation

/** * request address, request data, whether silent, request method */export default (url, data = {}, isSilence = false, method = 'POST') = > {let_opts = {method, url} // Common data merge (token)let _data = Object.assign({}, data, { token: store.getters.token })
  const _query = {}
  for (let _key in _data) {
    if(_data.hasOwnProperty(_key) && _data[_key] ! = =' '{_query[_key] = _data[_key]}} // The axios instance requests the timer IDlet_timer = null // Determine the request typeif (method.toLocaleUpperCase() === 'POST') {
    _opts.data = _query
  } else{_opts.params = _query} // Return a promisereturnNew Promise((resolve, reject) => {// instantiate axios const _instance = axios.create({timeout: TIME_OUT_MAX}) // Define a unique identifier for the requestlet _random = { stamp: Date.now(), url: `${_apiHost + url}} // Determine whether the request is silent (if silent, do not join the request identification queue, otherwise declare the timer of this request instance)if(! isSilence) { _timer =setTimeout(() => {pushRequest(_random)}, MINI_TIME)} // Axios sends the current request. 2. Remove the current id from the current request ID queue; _instance(_opts). Then (res => {let responseData = res.data
        clearTimeout(_timer)
        popRequest(_random)
        resolve(res.data)
      })
      .catch(res => {
        let _response = res.response
        let _message = null
        clearTimeout(_timer)
        popRequest(_random)
        switch (_response.status) {
          case 404:
            _message = '404, error request '
            break
          case 401:
            router.push({ path: '/login', query: { redirect: router.currentRoute.fullPath } })
            _message = 'Unauthorized'
            break
          case 403:
            _message = 'Access denied'
            break
          case 408:
            _message = 'Request timed out'
            break
          case 500:
            _message = 'Server internal error'
            break
          case 501:
            _message = 'Functionality not implemented'
            break
          case 503:
            _message = 'Service unavailable'
            break
          case 504:
            _message = 'Gateway error'
            break
          default:
            _message = 'Unknown error'
        }
        if(! isSilence) { Vue.$vux.toast.show({
            text: _response.data && _response.data.error ? _response.data.error : _message,
            type: 'warn',
            width: '10em'
          })
        }
        reject(res)
      })
  })
}Copy the code

Source file path

# Create a positive and energetic Image