Axios封装及引用

Axios封装

import axios from 'axios'
import { Message, MessageBox } from 'element-ui'
import store from '@/store'
import { getToken, getLoginTime, setLoginTime, getRefreshTokenStatus, setRefreshTokenStatus } from '@/utils/auth'
import codeMsg from '@/base/server/resCode'
import filterCode from '@/base/server/filterCode'

function debounce(fn, wait) {
    let timerId = null
    let flag = true
    return function () {
        clearTimeout(timerId);
        if (flag) {
            console.log(arguments)
            fn.apply(this, arguments)
            flag = false
            timerId = setTimeout(() => {
                flag = true
            }, wait)
        }
    }
}
const authError = debounce((message, cb) => {
    MessageBox.confirm(message, '', {
        confirmButtonText: window.vm.$i18n.t('common.ok'),
        cancelButtonText: window.vm.$i18n.t('common.cancel'),
        type: 'warning'
    }).then(() => {
        cb()
    })
  }, 20000)
// create an axios instance
const service = axios.create({
    // baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
    baseURL:
        process.env.NODE_ENV === 'production' ? `${location.protocol}//${location.host}` : process.env.VUE_APP_BASE_API, // url = base url + request url
    withCredentials: true, // send cookies when cross-domain requests
    timeout: 50000, // request timeout
    isShowAlert: true,
    useYapi: false
})

// request interceptor
service.interceptors.request.use(
    async (config) => {
        process.env.NODE_ENV === 'development' &&
            config.useYapi &&
            (config.url = 'http://10.35.224.14:3000/mock/28' + config.url)
        if (store.getters.token) {
            config.headers['X-Subject-Token'] = getToken()
            config.params = { ...config.params, _: new Date().getTime() } // get请求IE缓存
        }
        return config
    },
    (error) => {
        // do something with request error
        console.log(error) // for debug
        return Promise.reject(error)
    }
)

// response interceptor
service.interceptors.response.use(
    (response) => {
        const res = response.data
        const { isShowAlert, download, url } = response.config
        if (download) {
            return res
        }
        // 业务状态码报错提示
        if (res.hasOwnProperty('code') && codeMsg[res['code']] && !filterCode[res['code']]) {
            // window.vm.$i18n.locale = 'zh-CN'
            let msg = window.vm.$i18n.t('resCode.' + res.code)
            if (url.indexOf('authorize') > -1) {
                msg = window.vm.$i18n.t('resCode.' + res.code, {unlockRemainTimes: res.data && res.data.unlockRemainTimes && res.data.unlockRemainTimes, unlockRemainTime: res.data && res.data.unlockRemainTime && res.data.unlockRemainTime})
            }
            // const msg = res.desc
            isShowAlert &&
                Message({
                    message: msg,
                    type: 'error',
                    duration: 5 * 1000
                })
            return res
        } else {
            return res
        }
    },
    (error) => {
        const { url } = error.response.config
        const statusCode = error.response.status
        const data = error.response.data || {}
        if (statusCode == 401) {
            if (url.indexOf('authorize') > -1) {
                return Promise.resolve(error.response)
            } else {
                authError(window.vm.$i18n.t('error.msg.token.expired'), () => {
                    store.dispatch('user/resetToken').then(() => {
                        location.reload()
                    })
                })
            }
        } else {
            if (error.config.isShowAlert) {
                let message = error.response.message || (data.code && window.vm.$i18n.t('resCode.' + data.code)) || window.vm.$i18n.t('resCode.500')
                message && Message({
                    message,
                    type: 'error',
                    duration: 5 * 1000
                })
            }
        }
        return Promise.reject(error)
    }
)
export {
    authError
}
export default service

引用

import request from '@/utils/request'
import {getToken, getUserId} from '@/utils/auth.js';

/**
 *  根据userId查询矢量图配置
 * @param userId
 */
export const getVmapConfig = () => {
    return request({
        url: `/emap/gis/page/mapbiz_getMapConfigData.action?userId=${getUserId()}&token=${getToken()}`,
        method: 'post',
        lock: false
    })
};

/**
 *  查询矢量图内的设备/通道信息
 */
export const getVmapDevsInExtent = opt => {
    return request({
        url: '/emap/gis/page/mapbiz_getAllAreaDev.action',
        method: 'post',
        data: opt,
        lock: false
    })
};