http请求axios封装及各类请求使用

1.请求封装及参数携带规范

import Vue from 'vue'
import axios from 'axios'
import router from '@/router'
import qs from 'qs'
import merge from 'lodash/merge'
import { clearLoginInfo } from '@/utils'

const http = axios.create({
  timeout: 1000 * 30,
  withCredentials: true,
  headers: {
    'Content-Type': 'application/json; charset=utf-8'
  }
})
// 接口配置的数组对象转化为方法
// const  withAxios = apiConfig =>{
//   const serviceMap = {}
//   apiConfig.map(({name, url, method}) => {
//     serviceMap[name] = async function (data = {}) {
//       let key = 'params'
//       if (method === 'post' || method === 'get') {
//         key = 'data'
//       }
//       return axios({
//         method,
//         url: '/api' + url,
//         [key]: data
//       })
//     }
//   })
//   return serviceMap
// }
/**
 * 请求拦截
 */
http.interceptors.request.use(config => {
  config.headers['token'] = Vue.cookie.get('token') // 请求头带上token
  config.headers['username'] = Vue.cookie.get('username') // 请求头带上token
  return config
}, error => {
  return Promise.reject(error)
})

/**
 * 响应拦截
 */
http.interceptors.response.use(response => {
  if (response.data && response.data.code === 401) { // 401, token失效
    clearLoginInfo()
    router.push({ name: 'login' })
  }
  return response
}, error => {
  return Promise.reject(error)
})

http.adornUrl = (actionName) => {
  // 非生产环境 && 开启代理, 接口前缀统一使用[/proxyApi/]前缀做代理拦截!
  // return (process.env.NODE_ENV !== 'production' && process.env.OPEN_PROXY ? '/proxyApi/' : window.SITE_CONFIG.baseUrl) + actionName
  return '/api' + actionName
}

http.adornNoApiUrl = (actionName) => {
  return actionName
}

http.adornParams = (params = {}, openDefultParams = true) => {
  var defaults = {
    't': new Date().getTime()
  }
  return openDefultParams ? merge(defaults, params) : params
}


http.adornData = (data = {}, openDefultdata = true, contentType = 'json') => {
  var defaults = {
    't': new Date().getTime()
  }
  data = openDefultdata ? merge(defaults, data) : data
  return contentType === 'json' ? JSON.stringify(data) : qs.stringify(data)
}

export default http

2.普通文件下载的请求，比如流文件的格式及参数

export const exportNavControl = (data) => httpXG.post(`接口名称`, data, 'application/json', 'blob')  
// （‘接口名称’,‘携带参数’,'请求参数格式',‘流文件格式’）

3.git的坑加入后端需要的参数是后尾拼接的话就用params接收如果需要将参数放入body中的话就用data接收在封装时应封装两个git与delete请求（这两个请求方式大致相同）

//拼接参数写法  
get: (url, data) => {
    return axios({
      method: 'get',
      url,
      params: data 
    }).then((res) => {
      return checkStatus(res)
    }).catch((error) => {
      console.log(error)
    })
//携带参数写法

  get: (url, data) => {
    return axios({
      method: 'get',
      url,
      data: data 
    }).then((res) => {
      return checkStatus(res)
    }).catch((error) => {
      console.log(error)
    })

这就是一套近乎完美的请求封装了