后台管理项目----axios的封装

后台管理项目axios的封装

首先引用相关模块

// axios 引用
import axios from 'axios'

// 相关UI框架引用 本文用的 ant vue
import {message, Modal, notification} from 'ant-design-vue'

// vuex引用
import store from '../store'

// 本地存储引用
import db from './localstorage'

公共请求头的设置

const constURL = 'http://XXX.xxx.147.159:19527/'

// 统一配置
let JIEBAO_REQUEST = axios.create({
// 公共请求头
  baseURL: constURL,

// 类型
  responseType: 'json',

// `validateStatus` 定义对于给定的HTTP 响应状态码是 resolve 或 reject  promise 。如果 `validateStatus` 返回 `true` (或者设置为 `null` 或 `undefined`)，promise 将被 resolve; 否则，promise 将被 rejecte

  validateStatus (status) {
    // 200 外的状态码都认定为失败
    return status === 200
  }
})

拦截请求

// 拦截请求

// 添加请求拦截器
JIEBAO_REQUEST.interceptors.request.use((config) => {

  // 有 token就带上 从Vuex当中去除 token 

  if (store.state.account.token) {
// 添加到请求头
    config.headers.Authentication = store.state.account.token
  }
  return config
}, (error) => { // 对请求错误做些什么
  return Promise.reject(error)
})

响应拦截（根据响应返回的状态码来进行页面提示）

// 拦截响应
JIEBAO_REQUEST.interceptors.response.use((config) => {
  return config
}, (error) => {
  if (error.response) {
    let errorMessage = error.response.data === null ? '系统内部异常，请联系网站管理员' : error.response.data.message
    switch (error.response.status) {
      case 404:
        notification.error({
          message: '系统提示',
          description: '很抱歉，资源未找到',
          duration: 4
        })
        break
      case 403:
      case 401:
        if (!unLogin) {
          notification.warn({
            message: '系统提示',
            description: '很抱歉，您无法访问系统资源，可能是因为没有相应权限或者登录已失效',
            duration: 4
          })
          let secondsToGo = 5
          let modal = Modal.error({
            title: '系统提示',
            content: `很抱歉，您无法访问系统资源，可能是因为没有相应权限或者登录已失效, 将在 ${secondsToGo} 秒后自动跳转登录页面.`,
            okText: '重新登录',
            mask: false,
            onOk: () => {
              return new Promise((resolve, reject) => {
                db.clear()
                location.reload()
              })
            }
          })
          const interval = setInterval(() => {
            secondsToGo -= 1
            modal.update({
              content: `很抱歉，您无法访问系统资源，可能是因为没有相应权限或者登录已失效, 将在 ${secondsToGo} 秒后自动跳转登录页面.`
            })
          }, 1000)
          setTimeout(() => {
            clearInterval(interval)
            modal.destroy()
            return new Promise((resolve, reject) => {
              db.clear()
              location.reload()
            })
          }, secondsToGo * 1000)
          unLogin = true
        }
        break
      default:
        notification.error({
          message: '系统提示',
          description: errorMessage,
          duration: 4
        })
        break
    }
  }
  return Promise.reject(error)
})   

封装请求

POST 

// 封装post请求
post (url, params) {

//  axios原本的请求
    return JIEBAO_REQUEST.post(url, params, {

// transformRequest请求前更改请求数据格式 以 key=value&key=value 形式 保存

      transformRequest: [(params) => {
        let result = ''
// Object.keys提取参数中的key

        Object.keys(params).forEach((key) => {
          if (!Object.is(params[key], undefined) && !Object.is(params[key], null)) {

// encodeURIComponent() 函数可把字符串作为 URI 组件进行编码
            result += encodeURIComponent(key) + '=' + encodeURIComponent(params[key]) + '&'
          }
        })
        return result
      }],
// 请求头
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
      }
    })
  },

PUT 同上

GET 

get (url, params) {
    let _params

// Object.is 判断相等
    if (Object.is(params, undefined)) {
      _params = ''
    } else {
      _params = '?'
      for (let key in params) {

// hasOwnProperty 判断该属性是否为本身属性非继承属性

        if (params.hasOwnProperty(key) && params[key] !== null) {
          _params += `${key}=${params[key]}&`
        }
      }
    }
// 原生axios请求
    return JIEBAO_REQUEST.get(`${url}${_params}`)
  }

DELETE 同上

EXPORT

export (url, params = {}) {
// 框架提示
    message.loading('导出数据中')
// post方法
    return JIEBAO_REQUEST.post(url, params, {
      transformRequest: [(params) => {
        let result = ''
        Object.keys(params).forEach((key) => {
          if (!Object.is(params[key], undefined) && !Object.is(params[key], null)) {
            result += encodeURIComponent(key) + '=' + encodeURIComponent(params[key]) + '&'
          }
        })
        return result
      }],
// 请求头为blob 转换文件流
      responseType: 'blob'
    }).then((r) => {
// 获取到返回数据
      const content = r.data

// 通过Blob构造函数生成新的blob
      const blob = new Blob([content])
  // 设置下载文件名字
      const fileName = `${new Date().getTime()}_导出结果.xlsx`

// 检查浏览器兼容性 是否支持H5
      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()方法将“File或”保存Blob到磁盘
        navigator.msSaveBlob(blob, fileName)
      }
    }).catch((r) => {
      console.error(r)
      message.error('导出失败')
    })
  },

DOWNLOAD  同上

最后请求方法外面包裹一层reques对象 把request暴露出去 放进mian.js全局引用就可以了就完成