单独的js文件封装请求事件并引入element-ui

 单独的js文件this并不指向当前组件，而是该js的this，所以若想把请求数据赋给本地数据，或者想使用组件的this里面数据，就必须把组件的this当作参数传入封装的事件里面

// 引入element组件，这里的路径必须是 'element-ui' ，而不是自己src里面的element.js地址
import {
  Message,
  MessageBox
} from 'element-ui'


//配置axios
  //axios的默认根地址
  axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/'
  // axios请求拦截
  // 为保证其他的页面在每次请求时都确保是登录状态，便需要拦截器在请求之前加入token令牌，来让
  // 后台知道此时已经登录
  //request为请求，use为回调函数
  axios.interceptors.request.use(config => {
    // 为请求头对象，添加 Token 验证的 Authorization 字段
    config.headers.Authorization = window.sessionStorage.getItem('token')
    return config
  })

// 封装的请求后台数据事件
  // 请求参数为(this,'url地址','请求方式','返回的status值','如果返回失败提示什么内容','接收参数，数组形式[[接收参数1,请求参数1],[接收参数2,请求参数2]],',)
async function request(_this,url,way,parameter,status,err,reception){
  const {data:res} = await axios({
    method: way,
    url: `${url}`,
    data: parameter,
  })
  if(res.meta.status !== status) return Message.error('请求失败')
  for(var i = 0;i<reception.length;i++){
    _this[reception[i][0]] = eval(reception[i][1])
  }
}

export default {request}

 

 main.js

//引入全局函数
import global from './assets/util/global.js'// 公共方法函数的路径
Vue.prototype.$global = global

组件引入

 // 请求后台数据
    getRolesList() {
      // 调用自定义全局函数
      this.$global.request(this, "roles/", "get", "", 200, "获取失败", [
        ["rolesList", "res.data"],
      ]);
    },