基于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)
})