axios封装（通用）

axios封装

封装目的：
避免重复设置超时时间，请求头，错误处理；提高代码质量
主要文件目录：

post/index.js

/*
 * @Descripttion: axios 封装
 * @version: 1.0.0
 * @Author: hanjg
 * @Date: 2020-07-24 10:23:06
 * @LastEditors: hanjg
 * @LastEditTime: 2020-07-27 17:04:07
 */
import axios from 'axios'
import qs from 'qs'
import { Message } from 'element-ui'
import router from '../router/index'

var flag = true
const severHost = localStorage.getItem('severHost') // 请求ip
const severPort = localStorage.getItem('severPort') // 请求端口
const uploadFile = localStorage.getItem('upFile') // 文件地址

/**
 * 获取请求头
 * @param {String} type 接口参数类型 file：文件类型，参数不需要通过qs转化/inner：普通类型，参数需要转换
 * @returns {Object} header
 */
function getHead (type) {
  let header
  switch (type) {
    case 'inner':
      header = { // 请求体中的数据会以普通表单形式（键值对）发送到后端
        'Content-Type': 'application/x-www-form-urlencoded'
      }
      break
    case 'fileServer': // 上传到文件服务器
    case 'webServer': // 上传到web服务器
      header = {
        'Content-Type': 'multipart/form-data'
      }
      break
    case 'jsonString': // 将参数序列化json字符串进行传递
      header = {
        'Content-Type': 'application/json'
      }
      break
    default:
      header = { // 请求体中的数据会以普通表单形式（键值对）发送到后端
        'Content-Type': 'application/x-www-form-urlencoded'
      }
  }
  return header
}
/**
 * 封装请求接口方法
 * @param {String} type 接口参数类型 fileServer/webServer：文件类型，参数不需要通过qs转化/inner：普通类型，参数需要转换
 * @param {String} url 接口地址
 * @param {Object} data 请求参数
 * @returns {Promise}
 */
function post (type, url, data) {
  // console.log('http sever data:', data)
  const head = getHead(type)
  let axiosUrl = 'http://' + severHost + ':' + severPort + url // 普通数据发送地址
  console.log(axiosUrl)
  axios.defaults.withCredentials = true // 是否需要发送cookie
  if (type === 'inner') data = qs.stringify(data)
  if (type === 'fileServer') {
    axios.defaults.withCredentials = false
    axiosUrl = uploadFile + url // 文件上传地址
  }
  // console.log('axiosUrl:' + axiosUrl)
  return new Promise((resolve, reject) => {
    axios.post(axiosUrl, data, { headers: head }).then(res => {
      console.log('res:', res.data)
      if (res.data.code !== 200 && res.data.code !== 0) { // 异常回调()
        Message({
          message: res.data.msg,
          type: 'error',
          duration: 1000
        })
        reject(res)
      }
      if (res.data.code === 200 || res.data.code === 0) { // 正常解析
        flag = true
        console.log('success:', res)
        resolve(res)
      }
      if (flag) {
        if (res.code === 202) { // 导航守卫, 判断是否登陆
          if (router.history.current.name !== '/') {
            flag = false
            Message({
              message: '您尚未登录，即将跳转到登录页面!',
              type: 'error',
              duration: 1000
            })
            setTimeout(() => {
              router.push('/')
            }, 2000)
          }
        }
      }
    }).catch(e => {
      reject(e)
    })
  })
}
export default post

request/index.js

/*
 * @Descripttion: 项目所有请求接口合并于此
 * @version: 1.0.0
 * @Author: hanjg
 * @Date: 2020-07-24 15:30:24
 * @LastEditors: hanjg
 * @LastEditTime: 2020-07-27 19:31:28
 */
import post from '../post/index'
/**
 * 登录
 * @param {String} userName 用户名
 * @param {String} password 密码
 * @returns {Promise}
 */
function loginRequest (userName, password) {
  const params = {
    userName,
    password
  }
  return post('inner','地址', params)
}

/**
 * 获取用户信息
 * @returns {Promise}
 */
function getUserInfoRequest () {
  return post('inner', '地址')
}
/**
 * @returns {Promise}
 */
function getProjectListRequest () {
  const params = { pagNum: 1, pageSize: 300 }
  return post('inner', '/matrix-web/project/list', params)
}
/**
 * 离线重启
 * @returns {Promise}
 */
function termOffRestart (ip) {
  const params = { ip: ip }
  return post('inner', '/matrix-web/module/reboot', params)
}
/**
 * 获取监控列表
 * @param {Object} params 对象里的参数不固定
 * @returns {Promise}
 */
function getMonitorListRequest (params) {
  return post('inner', '地址', params)
}

/**
 * @returns {Promise}
 */
function getAppWhiteListtRequest () {
  const params = { pageNum: 1, pageSize: 300 }
  return post('inner', '地址', params)
}

/**
 * 获取公用模块列表
 * @param boxId 盒子id
 * @returns {Promise}
 */
function getCommonRobotListRequest (boxId) {
  const params = { boxId: boxId }
  return post('inner', '地址', params)
}
。。。等等方法
export default {
  loginRequest,
  getUserInfoRequest,
  getProjectListRequest,
  getMonitorListRequest,
  termOffRestart,
  getAppWhiteListtRequest,
  getBoxListtRequest,
  getCommonRobotListRequest
}

man.js引入

使用样例：

this.$request.termOffRestart (item.ip).then(res => { // 正常解析
            if (res.data.code === 200) {
              this.$message({
                type: 'success',
                message: res.data.msg,
                duration: 1000
              })
            }
          }).catch(e => { // 异常解析
            console.log('e:', e)
          })