全局声明引用

import utils from "./assets/common/utils"//公共的js文件
需要将utils挂载到Vue中,Vue.prototype.$utils = utils;
在组件中直接this.$utils就可以使用了

一个js文件是可以有多个 export,但是一个js文件中只能有一个export default ##多个变量在一个js 文件中声明 调用公共方法

utils.js中封装axios方法

import axios from 'axios';
// axios.defaults.headers["token"] = sessionStorage.getItem('token') ? sessionStorage.getItem('token') : ''; /* 让ajax携带token */
export default {
  publicUrl: '公共请求',
  request,//下方请求封装
  showLoading, 
  hideLoading,
  data() {
    return {
    }
  }
}

封装请求

function request(method, url, params, form, showError, code) {
  sessionStorage.setItem('token', 'token')
  var contetType = '', dataGet, dataPost;
  // showError 是否展示错误信息 不传默认为展示
  if (showError || showError == undefined) {
    showError = true
  } else {
    showError = false
  }
  //返回值是否有code 不穿默认有
  if (code || code == undefined) {
    code = true
  } else {
    code = false
  }
  if (!form) {
    contetType = 'application/json; charset=utf-8'
  } else {
    contetType = 'application/x-www-form-urlencoded'
  }
  // if (method == 'get') {
  //   dataGet = params
  // } else {
  //   dataPost = params
  // }
  return new Promise((resolve, reject) => {
    axios({
      headers: {
        'Content-Type': contetType,
        'token': sessionStorage.getItem('token') ? sessionStorage.getItem('token') : '' /* 让ajax携带token */
      },
      method: method,
      url: url,
      data: params, //get 请求直接在请求url 后面拼接参数
      withCredentials: true,
    }).then((res) => {
      if (code) {
        if (res.data.code == -1) {
          console.log('请先登录个人帐户')
        } else {
          resolve(res.data)
        }
      } else {
        resolve(res)
      }
    }).catch((res) => {
      if (showError) {
        // that.$message({
        //     message: res.data.message,
        //     type: 'warning'
        // });
        console.log(res, '请求错误信息')
      }
    })
  })
}

加载loading

// 展示loading
function showLoading() {
  let that = this;
  that.loading = Loading.service({
    // lock: true,// 打开会导致首页 点击底部tab 页面返回顶部
    text: '加载中...',
    spinner: 'el-icon-loading',
    customClass: 'loadCss',
    background: 'rgba(0, 0, 0, 0.7)'
  });
}

//隐藏loading
function hideLoading() {
  this.loading.close();
}

.vue 文件中使用

getData(){
    this.$utils.showLoading();
        this.$utils.request('get', this.$utils.publicUrl + '接口', '参数', false).then(res => {
            this.$utils.hideLoading();
            // console.log(res.data, '---unit_detail')
        }).catch(res => {
          // console.log(222222)
    })
}