axios 安装

cnpm install axios -S

nprogress 安装

cnpm install nprogress -S

封装axios

import axios from 'axios'
import Nprogress from 'nprogress' //引入头部加载状态条
import {
  messages
} from '@/assets/js/public'  //引入封装好的提示框

//自定义axios配置  新建一个axios实例
const service = axios.create({
  baseURL: '/',
  timeout: 10000 //设置接口超时时间
})
//给post请求添加请求头配置 （以下配置2选1）
//如果后端接收的是json数据类型，post 的 headers 需要设置 { ‘content-type’: ’application/json’ }，传给后端的数据就形如  { ‘name’:‘year’, ‘age’:’27’ } 
service.defaults.headers.post["Content-Type"] = 'application/json' //该配置可以省略 axios默认post请求头配置就是json数据格式

//如果后端接收的是（表单）字符串类型， { ‘content-type’: ’application/x-www-form-urlencoded’ }，传输给后端的数据就形如   ‘name=year&age=27’  
service.defaults.headers.post["Content-Type"] ="application/x-www-form-urlencoded;charset=UTF-8";  

/*
 *请求前拦截
 *用于处理需要请求前的操作
 */
service.interceptors.request.use(config => {
    Nprogress.start()
    return config;
  }),
  error => {
    Nprogress.done()
    return Promise.reject(error)
  }


/*
 *请求相应拦截
 *用于处理需要请求前的操作
 */
service.interceptors.response.use(response => {
    return new Promise((resolve, reject) => {
      Nprogress.done()
      let res = response.data;
      resolve(res)
    })
  },
  error => {
    Nprogress.done()
    //断网处理或者请求超时
    if (!error.response) {
      //请求超时
      if (error.message.includes("timeout")) {
        messages('error', '请求超时,请检查互联网连接')
      } else {
        //断网了
        messages('error', '请检查网络是否已连接')
      }

      return;
    }

    const status = error.response.status;
    switch (status) {
      case 500:
        messages('error', '操作失败');
        break;
      case 404:
        messages('error', '未找到远程服务器');
        break;
      default:
        messages('error', '请求失败')
    }

    return Promise.reject(error);
  }


)

/*
 *get方法，对应get请求
 *@param {String} url [请求的url地址]
 *@param {Object} params [请求时候携带的参数]
 */
export function get(url, params, config) {
  return service.get(url, {
    params
  }, config)
}


/*
 *post方法，对应post请求
 *@param {String} url [请求的url地址]
 *@param {Object} params [请求时候携带的参数]
 */
export function post(url, params, config) {
  return service.post(url, {
    params
  }, config)
}

/*
 * delete
 * @param {String} url [请求的url地址]
 * @param {Object} params [请求时携带的参数]
 */
export function delete(url, params) {
  return service.delete(url, params)
}

/*
 *put方法，对应put请求
 *@param {String} url [请求的url地址]
 *@param {Object} params [请求时候携带的参数]
 */
export function put(url, params) {
  return service.put(url, params)
}

参考：post请求头参考https://www.cnblogs.com/edwardwzw/p/11694903.html