基于Vue和element封装通用axios

直接上代码

var axios = require('axios')
import store from '../store/index'
import { Message } from 'element-ui'
import router from '../router'
var root = process.env.VUE_APP_BASE_API + '/api/v1'

function toType(obj) { // 自定义判断元素类型JS
  return ({}).toString.call(obj).match(/\s([a-zA-Z]+)/)[1].toLowerCase()
}
function filterNull(o) { // 参数过滤函数
  for (var key in o) {
    if (o[key] === null) {
      delete o[key]
    }
    if (toType(o[key]) === 'string') {
      o[key] = o[key].trim()
    } else if (toType(o[key]) === 'object') {
      o[key] = filterNull(o[key])
    } else if (toType(o[key]) === 'array') {
      o[key] = filterNull(o[key])
    }
  }
  return o
}
function apiAxios(method, url, params, success, failure) {
  if (params) {
    params = filterNull(params)
  }
  axios({
    method: method,
    url: url,
    data: method === 'POST' || method === 'PUT' ? params : null,
    params: method === 'GET' || method === 'DELETE' ? params : null,
    baseURL: root,
    withCredentials: false,
    headers: { 'token': store.getters.partner_token }
  })
    .then(function(res) {
      if (res.data.code === 200 || res.code === 200) {
        if (success) {
          success(res.data)
        }
      } else if (res.data.code === 403) {
        Message.error(res.data.message)
      } else {
        if (failure) {
          failure(res.data)
        } else {
          console.log('error: ' + JSON.stringify(res))
        }
      }
    })
    .catch(function(err) {
      var res = err.response
      if (err) {
        if (res.data.code === 401) {
          store.commit('SET_TOKEN', '')
          router.push('/login')
          Message.error(res.data.message)
        } else if (!!res && !!res.status) {
          console.log('api error, HTTP CODE: ' + res.status + ',message:' + JSON.stringify(res))
        } else {
          console.log('api error message:' + JSON.stringify(res))
        }
        return
      }
    })
}
// 返回在vue模板中的调用接口
export default {
  get: function(url, params, success, failure) {
    return apiAxios('GET', url, params, success, failure)
  },
  post: function(url, params, success, failure) {
    return apiAxios('POST', url, params, success, failure)
  },
  put: function(url, params, success, failure) {
    return apiAxios('PUT', url, params, success, failure)
  },
  delete: function(url, params, success, failure) {
    return apiAxios('DELETE', url, params, success, failure)
  }
}

可以跟后端约定好对应code码做不同的处理哦

可以在全局挂载到vue实例上这样方便在其他页面调用

 // 在  main.js中引入
import Vue from 'vue'

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import locale from 'element-ui/lib/locale/lang/zh-CN' // lang i18n
import api from '@/utils/api.js'
//挂载
Vue.prototype.$api = api
new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})

接下来在vue文件中直接使用

post

this.$api.post('/url/url', params,
  	s => {
    	console.log(s.data)
    }, f => {
      	console.log(f)
    })

get

this.$api.get('/url/url', params,
  	s => {
    	console.log(s.data)
    }, f => {
      	console.log(f)
    })

非常的方便啊