vue 里面使用axios 和封装的示例代码
vue官方推荐使用axios发送请求
首先上需求
1.需要封装全局调用
2.返回一个promise对象
3.错误全局统一处理
4.除了登录界面token带入头部
5.登录时候把用户信息自动存到vuex里面
首先上封装代码
/**
*User:sheyude
*Date:2017/8/230023
*Time:下午13:15
*
*/
importaxiosfrom'axios';
//导入配置文件配置文件就导入的请求的前缀地址
import{defaults}from'@/config/'
importstoragefrom'./storage'
//这是一个饿了么的弹框
import{Message}from'element-ui';
//路由配置
importrouterfrom'@/router'
/**
*封装的全局ajax请求
*/
classAxios{
constructor(){
this.init();
};
/**
*初始化
*/
init(){
axios.defaults.baseURL=defaults.baseURL;
};
_setUserInfo(data){
//把请求的数据存入vuex
store.commit('setUserInfo',data);
}
/**
*判断是否是登录
*@paramurl
*@returns{boolean}
*@private
*/
_isLogin(url){
if(url!='/app/login'){
axios.defaults.headers={'x-token':store.state.user.user.token.token};
returnfalse;
}else{
returntrue;
}
}
/**
*判断是否返回数据
*@paramdata接收到的数据
*@returns{boolean}
*@private
*/
_isStatus(data){
if(data.code==100){
router.push('/login');
Message.error(data.message||'请重新登录！');
returnfalse
}else{
returntrue
}
}
/**
*全局错误处理
*@paramdata传入错误的数据
*@private
*/
_error(data){
console.log(data)
Message.error('网络错误！');
}
/**
*GET请求{es6解构赋值}
*@paramtype包含url信息
*@paramdata需要发送的参数
*@returns{Promise}
*@constructor
*/
HttpGet({url},data){
console.log(data)
//创建一个promise对象
this._isLogin(url)
this.promise=newPromise((resolve,reject)=>{
axios.get(url,{params:data})
.then((data)=>{
//console.log(data)
if(this._isStatus(data.data)){
resolve(data.data);
}
})
.catch((data)=>{
this._error(data);
})
})
returnthis.promise;
};
/**
*POST请求
*@paramtypeObject包含url信息
*@paramdataObject需要发送的参数
*@paramurlDataObject需要拼接到地址栏的参数
*@returns{Promise}
*@constructor
*/
HttpPost({url},Data,urlData){
//判断是否加头部
this._isLogin(url);
//创建一个promise对象
this.promise=newPromise((resolve,reject)=>{
for(constiteminurlData){
url+='/'+urlData[item];
};
axios.post(url,Data)
.then((data)=>{
//是否请求成功
if(this._isStatus(data.data)){
//是否需要存数据
if(this._isLogin(url)){
this._setUserInfo(data.data)
};
resolve(data.data)
};
})
.catch((data)=>{
this._error(data);
})
})
returnthis.promise;
};
};
exportdefaultnewAxios();
调用方式
this.$axios.HttpPost(this.audit.auditGet,this.params)
.then((data)=>{
this.pageData=data.data
})
接收2个参数
1url地址
2需要传递的参数
我目前全局注册了使用需要挂载到vue原型
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。