vue接口封装
import axios from 'axios'
import { Message } from 'iview'
//axios请求拦截
service.interceptors.response.use(response => {
//统一处理返回信息
const res = response.data
//根据自己接口格式处理
if (res.code === 0)
return Promise.resolve(res)
else
//错误提示 --- iview
Message.warning(res.message)
return Promise.reject(res)
},
error => {
//error.response.data.message == 'Access Denied' 登录过期
if(error.response.status === 403 && error.response.data.message == 'Access Denied'
&& $cookies.get("loginError") !== "error"){
// 设置10秒内不重复提醒登录过期
$cookies.set("loginError", "error", 10);
Message.warning("登录超时,请重新登录");
router.push('/login');
} else if(error.response.data.message != 'Access Denied'){
// error.response.data.message == 'Forbidden' 无权限
Message.error(error.response.data.message == 'Forbidden' ?
'您无权限访问/操作此页面下的数据,请联系管理员配置访问权限!' : error.response.data.message)
}
return Promise.reject(error);
})
//请求方法封装,拷贝直接用~
export default {
Get(url, data = {}) {
return service({
url: url,
method: 'get',
params: data,
})
},
Post(url, data = {}) {
return service({
url: url,
method: 'post',
data: data,
})
},
Put(url, data = {}) {
return service({
url: url,
method: 'put',
data: data,
})
},
Delete(url, data = {}) {
return service({
url: url,
method: 'delete',
data: data,
})
}
}
import service from './service'
export default {
/**
* 获取用户信息
* @param data
*/
getUserInfo: (data) => {
return service.Get('/userinfo', data);
}
}
//引入
import api from './api/api';
放在Vue对象prototype下
Vue.prototype.$api = api;
//data:需要的参数
this.$api.getUserInfo(data)
.then((res) => {
//res接口返回得数据
//成功
})
.catch((err) => {
//err错误消息
//失败
})