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