AXIOS

引入axios 
import axios from 'axios'
引入通知组件
import { Notification, MessageBox, Message } from 'element-ui'
引入从Cookies中获取token
import { getToken } from '@/utils/auth'
引入把JSON转换成问号拼接的字符串
import { tansParams } from '@/utils/ruoyi'
//配置请求头
axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
// 创建axios实例
const service = axios.create({
  // axios中请求配置有baseURL选项，表示请求URL公共部分
  baseURL: process.env.VUE_APP_BASE_API,
  // 超时
  timeout: 60000
})
// request请求拦截器
service.interceptors.request.use(config => {
  /**判断时候有自定义参数 */
  const customConfig = config.customConfig
  if (customConfig) {
    MyLoading.showLoading(customConfig)
  }
  // 是否需要设置 token
  const isToken = (config.headers || {}).isToken === false

  if (getToken() && !isToken) {
    config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
  }
  // get请求映射params参数
  if (config.method.toLocaleLowerCase() === 'get' && config.params) {
    let url = config.url + '?' + tansParams(config.params)
    url = url.slice(0, -1)
    config.params = {}
    config.url = url
  }
  return config

}, error => {
  console.log(error)
  return Promise.reject(error)
})

// 响应拦截器
service.interceptors.response.use(res => {
    // 未设置状态码则默认成功状态
    const code = res.data.code || 200
    // 获取错误信息
    const msg = errorCode[code] || res.data.msg || errorCode['default']
    return new Promise((resolve, reject) => {
      handleRequest(resolve, reject, msg, code, res)
    })
  },
  error => {
    console.log('err' + error)
    let { message } = error
    if (message === 'Network Error') {
      message = '后端接口连接异常'
    } else if (message.includes('timeout')) {
      message = '系统接口请求超时'
    } else if (message.includes('Request failed with status code')) {
      message = '系统接口' + message.substr(message.length - 3) + '异常'
    }
    Message({
      message: message,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  }
)

axios使用

// 注册方法
export function register(data) {
  return request({
    url: '/auth/register',
    headers: {
      isToken: false
    },
    method: 'post',
    data: data
  })
}

下载zip包

import axios from 'axios'
import { getToken } from '@/utils/auth'
// mimeType MIME类型
const mimeMap = {
  xlsx: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
  zip: 'application/zip'
}
//你的url
const baseUrl = process.env.VUE_APP_BASE_API

export function downLoadZip(str, filename) {
  var url = baseUrl + str
  axios({
    method: 'get',
    url: url,
    responseType: 'blob',
    headers: { 'Authorization': 'Bearer ' + getToken() }
  }).then(res => {
    resolveBlob(res, mimeMap.zip)
  })
}

/**
 * 解析blob响应内容并下载
 * @param {*} res blob响应内容
 * @param {String} mimeType MIME类型
 */
export function resolveBlob(res, mimeType) {
  const aLink = document.createElement('a')
  var blob = new Blob([res.data], { type: mimeType })
  // //从response的headers中获取filename, 后端response.setHeader("Content-disposition", "attachment; filename=xxxx.docx") 设置的文件名;
  var patt = new RegExp('filename=([^;]+\\.[^\\.;]+);*')
  var contentDisposition = decodeURI(res.headers['content-disposition'])
  var result = patt.exec(contentDisposition)
  var fileName = result[1]
  fileName = fileName.replace(/\"/g, '')
  aLink.style.display = 'none'
  aLink.href = URL.createObjectURL(blob)
  aLink.setAttribute('download', fileName) // 设置下载文件名称
  document.body.appendChild(aLink)
  aLink.click()
  URL.revokeObjectURL(aLink.href)//清除引用
  document.body.removeChild(aLink)
}

下载文件

// 通用下载方法
export function download(url, params, filename) {
//弹出消息框
  MyLoading.showLoading()
  return service.post(url, params, {
    transformRequest: [(params) => {
      return tansParams(params)
    }],
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    },
    responseType: 'blob'
  }).then((data) => {
    const content = data
    const blob = new Blob([content])
    //创建下载a标签
    if ('download' in document.createElement('a')) {
      const elink = document.createElement('a')
      elink.download = filename
      elink.style.display = 'none'
      elink.href = URL.createObjectURL(blob)
      document.body.appendChild(elink)
      elink.click()
      URL.revokeObjectURL(elink.href)
      document.body.removeChild(elink)
    } else {
      navigator.msSaveBlob(blob, filename)
    }
    MyLoading.closeLoading()
  }).catch((r) => {
    console.error(r)
    MyLoading.closeLoading()

  })
}

上传文件

import axios from 'axios'
import { getToken } from '@/utils/auth'
//上传文件
const baseUrl = process.env.VUE_APP_BASE_API

/**
file 文件对象
callback回调函数
url
*/
export default function uploadfile(file, callback, url) {
  url = baseUrl + url
  const formFile = new FormData()
  formFile.append('file', file)
  axios({
    method: 'post',
    url: url,
    responseType: 'blob',
    headers: {
      'Authorization': 'Bearer ' + getToken(),
      'Content-Type': 'multipart/form-data'
    }
  }).then(responents => {

  })
  
}

工具函数

参数转换字符串

/**
 * 参数处理 把对象变成URL
 * @param {*} params  参数
 encode编码
 decode解码
 */
export function tansParams(params) {
  let result = ''
  const ERROR = [null, undefined, 'undefined', '', 'null']
  for (const propName of Object.keys(params)) {
    const value = params[propName]
    //编码属性名称
    var part = encodeURIComponent(propName) + '='
    if (!ERROR.includes(value)) {
      //如果是对象 或者数组
      if (typeof value === 'object') {
        for (const key of Object.keys(value)) {
          let params = propName + '[' + key + ']'
          var subPart = encodeURIComponent(params) + '='
          result += subPart + encodeURIComponent(value[key]) + '&'
        }
      } else {
      //拼接编码字符串
        result += part + encodeURIComponent(value) + '&'
      }
    }
  }
  return result
}

上传前校检格式和大小

    // 上传前校检格式和大小
    handleBeforeUpload(file) {
      /*
      fileType =  ["doc", "xls", "ppt", "txt", "pdf"],
       */
      // 校检文件类型
      if (this.fileType) {
     	 //文件扩展名
        let fileExtension = "";
        if (file.name.lastIndexOf(".") > -1) {
          fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
        }
        const isTypeOk = this.fileType.some((type) => {
          if (file.type.indexOf(type) > -1) return true;
          if (fileExtension && fileExtension.indexOf(type) > -1) return true;
          return false;
        });
        if (!isTypeOk) {
          this.$message.error(`文件格式不正确, 请上传${this.fileType.join("/")}格式文件!`);
          return false;
        }
      }
      // 校检文件大小
      if (this.fileSize) {
        const isLt = file.size / 1024 / 1024 < this.fileSize;
        if (!isLt) {
          this.$message.error(`上传文件大小不能超过 ${this.fileSize} MB!`);
          return false;
        }
      }
      return true;
    },