yinghe-lowcode-zln/src/utils/request.js

基于vue、ant-design-vue,datagrid的低代码平台

import Vue from 'vue'
import axios from 'axios'
import store from '@/store'
import Notification from 'ant-design-vue/es/notification'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import { VueAxios } from './axios'
import router from '@/router'

const uploadUrl = process.env.VUE_APP_API_BASE_URL + '/service/restful/uploadFile'
const installer = {
  vm: {},
  install(Vue) {
    Vue.use(VueAxios, service)
  },
}

// 创建 axios 实例
const service = axios.create({
  baseURL: process.env.VUE_APP_API_BASE_URL,
  timeout: 30000,
})
const successCode = [200, 0, '200', '0000']
// 操作正常Code数组
const codeVerificationArray = isArray(successCode) ? [...successCode] : [...[successCode]]
function isArray(arg) {
  if (typeof Array.isArray === 'undefined') {
    return Object.prototype.toString.call(arg) === '[object Array]'
  }
  return Array.isArray(arg)
}
const CODE_MESSAGE = {
  401: 'token已过期，请重新登录',
  403: '禁止访问',
  404: '访问资源不存在',
  500: '服务器发生错误',
}
const handleData = response => {
  const token = Vue.ls.get(ACCESS_TOKEN)
  const config = response.config
  const data = response.data
  const status = response.status
  const types = ['blob', 'raw']
  if (types.includes(config.responseType)) {
    return response
  }
  // 若data.code存在，覆盖默认code
  let code = data && data.code ? data.code : status
  // 若code属于操作正常code，则status修改为200
  if (codeVerificationArray.indexOf(data.code) + 1) code = 200
  if (status === 401) code = 401
  switch (code) {
    case 200:
      return data
    case 401:
      store.dispatch('Logout').then(() => {
        setTimeout(() => {
          window.location.reload()
        }, 1000)
      })
      break
    case 404:
      router.push({ path: '/404' })
      break
  }
  // 异常处理
  Notification.error({
    message: '系统消息',
    description: data.message ? data.message : CODE_MESSAGE[code],
    duration: null,
  })
  return Promise.reject(data.message)
}

// 统一请求拦截
service.interceptors.request.use(
  config => {
    const token = Vue.ls.get(ACCESS_TOKEN)
    if (token) {
      config.headers['token'] = token
    }
    // get请求映射params参数
    if (config.method === 'get' && config.params) {
      let url = config.url + '?'
      for (const propName of Object.keys(config.params)) {
        const value = config.params[propName]
        var part = encodeURIComponent(propName) + '='
        if (value && typeof value !== 'undefined') {
          if (typeof value === 'object') {
            for (const key of Object.keys(value)) {
              const params = propName + '[' + key + ']'
              var subPart = encodeURIComponent(params) + '='
              url += subPart + encodeURIComponent(value[key]) + '&'
            }
          } else {
            url += part + encodeURIComponent(value) + '&'
          }
        }
      }
      url = url.slice(0, -1)
      config.params = {}
      config.url = url
    }
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

// 统一返回拦截
service.interceptors.response.use(
  response => handleData(response),
  error => {
    const { response } = error
    if (response === 'undefined') {
      Notification.error({
        message: '系统错误',
        description: '连接失败，请稍后再试',
        duration: null,
      })
      return {}
    } else return handleData(response)
  }
)
export { installer as VueAxios, service as axios, uploadUrl }