Vue axios 封装 拦截示例
?
封装
?REQ拦截
RES拦截
?
使用FormData传递数据
?使用接口
?
封装
export function ajax(url, params, type) {
let config = { method: type || 'post' }
if (type === 'GET') {
config.params = params
} else {
config.data = type ? {} : params
}
console.log(config)
return instance(url, config)
.then(response => {
return response.data
})
.catch(error => {
console.log('通信失败,请检查您的网络,或联系系统管理员')
})
}
?REQ拦截
instance.interceptors.request.use(
function(config) {
if (Lockr.get('token')) {
config.headers.common['Authorization'] = Lockr.get('token')
}
return config
},
error => {
return Promise.reject(error)
}
)
RES拦截
instance.interceptors.response.use(res => {
if (res.data.code) {
switch (res.data.code) {
case 401:
Lockr.rm('token')
window.location.href = '/#/admin/login/'
break
}
} else {
}
return res
})
?
使用FormData传递数据
const instance = axios.create()
instance.defaults.headers.post['Content-Type'] = 'multipart/form-data'
instance.defaults.headers.put['Content-Type'] = 'multipart/form-data'
instance.defaults.headers.patch['Content-Type'] = 'multipart/form-data'
?使用接口
export default {
getList(display = '7', page = '1', db, type = '1') {
let params = {
'display':display,
'current':page,
'type':type
}
return ajax(db, params,'GET')
},
//
putList(db,id) {
let data = new FormData()
data.append('id',id)
return ajax(db, data,'PATCH')
}}
?