axios请求封装（vue项目）

// js请求封装文件

// npm下载后，引入axios
import axios from 'axios'

// 引入loading组件，以便于在请求还未返回的时候
import {
    
    
  Loading,
  Message
} from 'element-ui'

// 创建axios服务
var server = axios.create({
    
    
  // 基础路径
  baseURL: 'http://192.168.0.165:18081/',
  // process.env.VUE_APP_API_BASE_URL 也可以通过vue变量统一定义可以判断出生产环境/开发环境
})

function MyMessage(option) {
    
    
  Message.closeAll()
  Message(option)
}
MyMessage.success = function (option) {
    
    
  Message.closeAll()
  Message.success(option)
}
MyMessage.warning = function (option) {
    
    
  Message.closeAll()
  Message.warning(option)
}
MyMessage.error = function (option) {
    
    
  Message.closeAll()
  Message.error(option)
}
MyMessage.info = function (option) {
    
    
  Message.closeAll()
  Message.info(option)
}


var load // loading变量
// 请求拦截
server.interceptors.request.use(function (config) {
    
    
  // 登录信息token
  let token = localStorage.getItem('userToken')
  // 设置请求头
  config.headers['token'] = token
  if (!config.headers['Content-Type']) {
    
    
    config.headers['Content-Type'] = 'application/x-www-form-urlencoded'
  }

 // 请求时添加loading组件
  load = Loading.service({
    
    
    lock: true,
    spinner: 'el-icon-loading',
    background: 'rgba(0, 0, 0, 0.1)'
  })
  return config
}, function (error) {
    
    
  // 返回错误promise
  return Promise.reject(error)
})

// 添加响应拦截器
server.interceptors.response.use(function (response) {
    
    

  // 接口响应后，关闭loading
  load && load.close()
  
  // 如果未登录去登录
  if (response.data.code == 401) {
    
    
    console.log('未登录')
    return false
  }

  // 对返回状态进行处理
  if (response.status === 200) {
    
    
    response = response.data
  }


  // 否则返回正确promise
  return Promise.resolve(response)
}, function (error) {
    
    

  // 关闭load
  load && load.close()
  // 返回错误promise
  let errorMsg = '<span style="font-weight: bold; font-size: 13px; display: inline-block; padding-bottom: 5px;">Error</span><br/>'
  
  // 提示
  MyMessage({
    
    
    message: errorMsg,
    dangerouslyUseHTMLString: true,
    type: "error"
  })
  return Promise.reject(error)
})

/*
 * 请求封装
 */
export const post = function (url, data) {
    
    
  return server({
    
    
    method: 'post',
    url,
    data,
  })
}
export const get = function (url, params) {
    
    
  return server({
    
    
    method: 'get',
    url,
    params
  })
}
export const postApply = function (url, data) {
    
    
  return server({
    
    
    headers: {
    
    
      'Content-Type': 'application/json;charset=UTF-8'
    },
    transformRequest: [function (data) {
    
    
      data = JSON.stringify(data)
      return data
    }],
    method: 'post',
    url,
    data,
  })
}

export default server

// api 使用
// 导入封装的请求方法
import server, {
    
    
  get,
  post,
  postApply
} from './server'
// 接口
export function apiName(data) {
    
    
  let url = url
  return postApply(url, data)
}