Vue Promise的axios请求封装详解
现在应该大部分公司都是前后端分离了。so，数据请求的封装还是必须的。
为了实现向ios中block封装请求的异步的效果，我采用JavaScript中promise这个对象。
varp1=Newpromise((resolve,reject)=>{
vartimeOut=Math.random()*2;
log('settimeoutto:'+timeOut+'seconds.');
setTimeout(function(){
if(timeOut<1){
log('callresolve()...');
resolve('200OK');
}
else{
log('callreject()...');
reject('timeoutin'+timeOut+'seconds.');
}
},timeOut*1000);
})
其中resolve,reject就相当于是你定义了两个block，然后把数据传出去。
继续往下看,紧接着上面的代码
varp2=p1.then(function(result){//resolve导出的数据
console.log('成功：'+result);
});
varp3=p2.catch(function(reason){//reject导出的数据
console.log('失败：'+reason);
});
通过查阅资料还发现另外两种用法，Promise.all和Promise.race这两种。
varp1=newPromise(function(resolve,reject){
setTimeout(resolve,500,'P1');
});
varp2=newPromise(function(resolve,reject){
setTimeout(resolve,600,'P2');
});
//同时执行p1和p2，并在它们都完成后执行then:
Promise.all([p1,p2]).then(function(results){
console.log(results);//获得一个Array:['P1','P2']
});
这一种是p1和p2都返回了数据，才会执行all后面的then函数。挺像ios中GCD的notify函数
第二种
varp1=newPromise(function(resolve,reject){
setTimeout(resolve,500,'P1');
});
varp2=newPromise(function(resolve,reject){
setTimeout(resolve,600,'P2');
});
Promise.race([p1,p2]).then(function(result){
console.log(result);//'P1'
});
race跑步的意思，看谁跑得快，跑得慢的就被摒弃掉了。
上面这些是封装的基础，下面来看具体应用#
基于axios的请求封装
//判断请求环境来区分链接生产环境和测试环境
constajaxUrl=env==='development'?
'https://www.baidu.com':
env==='production'?
'https://www.baidu.com':
'https://www.baidu.com';
util.ajax=axios.create({
baseURL:ajaxUrl,
timeout:30000
});
//options中包含着数据
exportfunctionaxiosfetch(options){
returnnewPromise((resolve,reject)=>{
vartoken=window.localStorage.getItem('token')?window.localStorage.getItem('token'):"";
varcid=window.localStorage.getItem('X-CID')?window.localStorage.getItem('X-CID'):"";
//varlanguage=window.localStorage.getItem('language')?window.localStorage.getItem('language'):"";
varlanguage=tools.getCookie('language')?tools.getCookie('language'):navigator.language;
language=language=="en-US"?"en":language;
debug.log(language)
varparams=tools.deepClone(options.params);//深拷贝
varsign_str=tools.sign(params);//签名
constinstance=axios.create({
baseURL:ajaxUrl,
timeout:30000,
//instance创建一个axios实例，可以自定义配置，可在axios文档中查看详情
//所有的请求都会带上这些配置，比如全局都要用的身份信息等。
headers:{//所需的信息放到header头中
//'Content-Type':'application/json',
"Authorization":token,
"X-CID":cid,
"X-LOCALE":language,
"X-SIGN":sign_str
},
//timeout:30*1000//30秒超时
});
lethttpDefaultOpts={//http默认配置
method:options.method,
url:options.url,
timeout:600000,
params:Object.assign(params),
data:qs.stringify(Object.assign(params)),
//headers:options.method=='get'?{
//'X-Requested-With':'XMLHttpRequest',
//"Accept":"application/json",
//"Content-Type":"application/json;charset=UTF-8",
//"Authorization":token
//}:{
//'X-Requested-With':'XMLHttpRequest',
//'Content-Type':'application/x-www-form-urlencoded;charset=UTF-8',
//"Authorization":token
//}
}
if(options.method=='get'){//判断是get请求还是post请求
deletehttpDefaultOpts.data
}else{
deletehttpDefaultOpts.params
}
instance(httpDefaultOpts)
.then(response=>{//then请求成功之后进行什么操作
debug.log('参数:')
debug.log(options.params)
debug.log('响应:')
debug.log(response)
debug.log(response.data.errno)
if(response.data.errno==401){
//alert(response.data.errmsg)
//window.location.href=window.location.protocol+"//"+window.location.host+'/#/login'
return
}
if(response.data.errno==400){
reject(response)
return
}
resolve(response)//把请求到的数据发到引用请求的地方
})
.catch(error=>{
//console.log('请求异常信息=>：'+options.params+'\n'+'响应'+error)
debug.log('请求异常信息=>：'+options.params+'\n'+'响应'+error)
reject(error)
})
})
}
外面再包一层
exportfunctiongetNodeDetailInfo(address){
returnaxiosfetch({
url:api.nodeDetailAPI,//链接
method:"get",//get请求
params:{//数据
address:address
}
})
}
再下面就是实际应用。
getNodeDetailInfo(address).then(res=>{
vardata=res.data.data;
}).catch(error=>{
console.log(error,'请求失败')
})
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。