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(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。