vue cli 3.0中使用axios，以及axios二次封装

1、

import Axios from 'axios'
import Vue from 'vue'
import qs from 'querystring'
import sf from 'string-format'
import { ResError } from './error/ResError'
// import { Message } from 'iview';
import { Dialog } from 'vant';
Vue.use(Dialog);
// import store from '@/store'
// import router from '@/router'
import cacheHelper from '@/utils/cacheHelper';

const axios = Axios.create({
  baseURL: '', // 开发地址
  // eslint-disable-next-line no-undef
  // baseURL: dataServerUrl, // 发包地址
  timeout: 6000, // 证据上传时文件太大容易超时
  headers: {
  }
})
axios.defaults.withCredentials = true // 是否携带请求头
// axios.defaults.withCredentials = false
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8'
// axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8'
// axios.defaults.headers.post['Content-Type'] = 'application/json'

// 请求拦截器
axios.interceptors.request.use(config => {
  // 根据需要对数据进行转换处理：比如需要统一加上token值那么可以做如下处理
  // if (!config.params) {
  //   config.params = {}
  // }
  // config.params.accessToken = localStorage.getItem('accessToken');
  // config.params.accessToken = cacheHelper.GetLocalCacheByKey('accessToken');

  if (config.method === 'post') {
    console.log('请求拦截器 ： ')
    console.log('[data] : ')
    console.log(config.data)
    console.log(config)
    let bakData = config.data
    config.data = qs.stringify(config.data) || bakData
    console.log('解析data: ')
    console.log(config.data)
  }
  // config.headers['token'] = Vue.cookie.get('token')
  return config
}, error => {
  // Vue.alert('请求出错拉>.<')
  Dialog.alert({
    title: '提示',
    message: '网络异常，请稍后！'
  }).then(() => {
    // on close
  });
  // Message.error('网络异常！');
  return Promise.reject(error)
})

// 响应拦截器
axios.interceptors.response.use(res => {
  console.log('响应回调！！')
  console.log(res)
  // if (res.data.code === 501) {
  //   console.log('用户未登录!')
  //   // store.commit('setToken', '')
  //   // store.commit('setAccess', [])
  //   localStorage.clear()
  // }
  // 状态码小于0属于异常情况
  // if (res.data.code < 0) {
  //   throw new ResError(res.data.msg)
  // }
  // if (res.data.code  ===  401) {
  //   console.log('token 失效， 请重新登录.................')
  //   // router.replace('/dangshiren');
  //  var path= cacheHelper.getCookie('loginpath');
  //   layer.msg('您长时间未操作或在其它地方登录');
  //   // router.push('/'+path);
  // }
  return res.data
}, error => {
  console.log(error)
  console.log('请求服务器失败，请检查服务是否正常！');
  Dialog.alert({
    title: '提示',
    message: '网络异常，请稍后！'
  }).then(() => {
    // on close
  });
  // this.$toast('提示文案');
  // Message.error('网络异常！');
  // 请求状态码
  // switch (error.response.status) {
  //   case 402:
  //     // 清除token信息
  //     alert('登录过期，请重新登录')
  //     // 清除token信息
  //     localStorage.setItem('accessToken', '')
  //     // permissionUtil.logout()

  //     return error
  //   case 404:
  //     // 跳转404
  //     router.replace({
  //       path: '/404'
  //     })
  //     break
  // }
  throw new ResError('请求服务器失败，请检查服务是否正常！');

})

export const get = (url, params, pathVariable = null) => axios.get(sf(url, pathVariable), {params: params})

export const post = (url, params, pathVariable = null) => axios.post(sf(url, pathVariable), params) // 正常格式
// export const postUplod = (url, params, pathVariable = null) => axios.post(sf(url, pathVariable), params) // 正常格式
// 奇葩的请求http://192.168.3.127:8080/painting/api/service?json=' + JSON.stringify(data)
// export const post = (url, params, pathVariable = null) => axios.post(url + JSON.stringify(params), pathVariable) // (特殊的奇葩用过立即删除)
// export const serverPost = (url, params, pathVariable = null) => axios.post(url + params, pathVariable) // (特殊的奇葩用过立即删除)

export const put = (url, params, pathVariable = null) => axios.put(sf(url, pathVariable), params)

export const patch = (url, params, pathVariable = null) => axios.patch(sf(url, pathVariable), params)

export const del = (url, params, pathVariable = null) => axios.delete(sf(url, pathVariable), {params: params})

/2、使用说明
引入对应的请求方式

import { post } from '@/libs/http';

3、异步调用

async getCourseDetail() {
	let that = this;
     let data = {
        "caid": courseId
     };

     let res = await post(requestMapping.baseUrl, data);
}