shohei-ot
1/29/2018 - 5:48 AM

http client by axios with nprogress

http client by axios with nprogress

import NProgress from 'nprogress'

const STATE = {
  PREV_QUEUEING: 0,
  QUEUEING: 0
}

class Progressor {
  static queue() {
    STATE.PREV_QUEUEING = STATE.QUEUEING
    STATE.QUEUEING++
    return this._handleNProgress()
  }
  static deque() {
    STATE.PREV_QUEUEING = STATE.QUEUEING
    STATE.QUEUEING--
    return this._handleNProgress()
  }
  // alias: deque()
  static dequeue() {
    return this.deque()
  }
  static _handleNProgress() {
    if (STATE.QUEUEING === 0 && STATE.PREV_QUEUEING > 0) {
      NProgress.done()
    } else if (STATE.QUEUEING > 0 && STATE.PREV_QUEUEING === 0) {
      NProgress.inc()
    }
    return Promise.resolve()
  }
}

export default Progressor
import axios from 'axios'
import qs from 'qs'
import Progressor from './progressor'

const CancelToken = axios.CancelToken

class Http {
  /**
   * Ajax request
   * @param {String} method   get, post, put, delete, other. (default: get)
   * @param {String} url      e.g.) "/api/v1/opendata/search_dataitems"
   * @param {Object} params   (optional) e.g.: {target: "inbound", inbound: {nationality: "CN"}}
   * @param {Object} header   (optional) e.g.: {"Authorization": "Bearer <JWT token string>"}
   * @return {Promise}
   */
  static request(method = 'get', url = '/api', params = {}, header = {}) {
    method = method.toLowerCase()
    const conf = {
      method,
      url,
      headers: Object.assign({}, header)
    }
    if (method === 'get') {
      if (Object.keys(params).length) {
        conf.url = this.genQueryStringifyUrl(url, params)
      }
    } else {
      conf.data = params
    }
    if (typeof this._cancelToken !== 'undefined') {
      conf.cancelToken = this._cancelToken.token
      delete this._cancelToken
    }
    Progressor.queue()
    return axios
      .request(conf)
      .then(res => {
        Progressor.deque()
        return Promise.resolve(res)
      })
      .catch(err => {
        Progressor.deque()
        if (axios.isCancel(err)) {
          console.log(err.message)
          return Promise.resolve(err)
        } else {
          return Promise.reject(err)
        }
      })
  }

  static regCancel() {
    const source = CancelToken.source()
    this._cancelToken = source
    return source.cancel
  }

  static genQueryStringifyUrl(url, params) {
    const urlChunks = url.split('?')
    if (urlChunks.length === 2) {
      const preset = qs.parse(urlChunks[1])
      params = Object.assign({}, preset, params)
    }
    const queryStringifyUrl = urlChunks[0] + `?${qs.stringify(params)}`
    return queryStringifyUrl
  }

  static get(url, data = {}) {
    return this.request('get', url, data)
  }

  static post(url, data = {}) {
    return this.request('post', url, data)
  }

  static put(url, data = {}) {
    return this.request('put', url, data)
  }

  static delete(url, data = {}) {
    return this.request('delete', url, data)
  }
}

export default Http