现在应该大部分公司都是前后端分离了,所以,数据请求的封装还是必须的。
为了实现向ios中块封装请求的异步的效果,我采用JavaScript中承诺这个对象。
var p1=新的承诺((解决,拒绝)=祝辞{
var超时=math . random () * 2;
日志(“超时设置为:”+超时+ '秒。');
setTimeout(函数(){
如果超时& lt;1){
日志(“电话解决()…”);
解决(“200 OK”);
}
其他{
日志(“叫拒绝()…”);
拒绝(“超时”+超时+ '秒。');
}
},超时* 1000);
})
之前
其中解决,拒绝就相当于是你定义了两个街区,然后把数据传出去。
继续往下看,紧接着上面的代码
var p2=p1。然后(函数(结果){//解决导出的数据
控制台。日志(“成功:' +结果);
});
var p3=p2。抓住(函数(原因){//拒绝导出的数据
控制台。日志(“失败:' +原因);
});
之前
通过查阅资料还发现另外两种用法,承诺。所有和Promise.race这两种。
var p1=新的承诺(函数(解决,拒绝){
setTimeout(500年解决,“P1”);
});
var p2=新的承诺(函数(解决,拒绝){
setTimeout(600年解决,“P2”);
});//同时执行p1和p2,并在它们都完成后执行:
的承诺。((p1, p2))。然后(函数(结果){
console.log(结果);//获得一个数组:[P1, P2的)
});
之前
这一种是p1和p2都返回了数据,才会执行所有的后面的然后函数。挺像ios中肾小球囊性肾病的通知函数
<强>第二种
var p1=新的承诺(函数(解决,拒绝){
setTimeout(500年解决,“P1”);
});
var p2=新的承诺(函数(解决,拒绝){
setTimeout(600年解决,“P2”);
});
的承诺。种族((p1, p2))。然后(函数(结果){
console.log(结果);//癙1”
});
之前
比赛跑步的意思,看谁跑得快,跑得慢的就被摒弃掉了。
<强>上面这些是封装的基础,下面来看具体应用#
基于axios的请求封装
//判断请求环境来区分链接生产环境和测试环境
const ajaxUrl=env==='发展' & # 63;
“https://www.baidu.com”:
env===? # 63;
“https://www.baidu.com”:
“https://www.baidu.com”;
跑龙套。ajax=axios.create ({
baseURL: ajaxUrl,
超时:30000
});//选项中包含着数据
导出功能axiosfetch(选项){
返回新的承诺((解决,拒绝)=比;{
var牌=window.localStorage.getItem(令牌)& # 63;window.localStorage.getItem(令牌):“”;
var cid=window.localStorage.getItem (X-CID) & # 63;window.localStorage.getItem (X-CID):“”;//var语言=window.localStorage.getItem(语言)& # 63;window.localStorage.getItem(语言):“”;
var=tools.getCookie语言(语言)& # 63;tools.getCookie(“语言”):navigator.language;
语言===癳n - us”& # 63;“en”:语言;
debug.log(语言)
var params=tools.deepClone (options.params);//深拷贝
var sign_str=tools.sign (params);//签名
const实例=axios.create ({
baseURL: ajaxUrl,
超时:30000,//实例创建一个axios实例,可以自定义配置,可在axios文档中查看详情//所有的请求都会带上这些配置,比如全局都要用的身份信息等。
标题:{//所需的信息放到标题头中//澳谌堇嘈汀?“application/json”,
“授权”:令牌,
“X-CID”: cid,
“X-LOCALE”:语言,
“X-SIGN”: sign_str
},//超时:30 * 1000//30秒超时
});
让httpDefaultOpts={//http默认配置
方法:options.method,
url: options.url,
超时:600000,
参数:Object.assign (params),
数据:qs.stringify (Object.assign (params)),//标题:options.method==玫健? # 63;{//癤-Requested-With”:“XMLHttpRequest”,//敖邮堋?“application/json”,//澳谌堇嘈汀?“application/json;charset=utf - 8”,//笆谌ā?令牌//}:{//癤-Requested-With”:“XMLHttpRequest”,//澳谌堇嘈汀?“应用程序/x-www-form-urlencoded;charset=utf - 8 ',//笆谌ā?令牌//}
}
如果(options.method==玫健?{//判断是得到请求还是帖子请求
删除httpDefaultOpts.data
其他}{
删除httpDefaultOpts.params
}
实例(httpDefaultOpts)
不要犹豫(反应=比;{//然后请求成功之后进行什么操作
debug.log(“参数:')
debug.log (options.params)
debug.log('响应:')
debug.log(响应)
debug.log (response.data.errno)
如果(response.data。errno==401) {//警报(response.data.errmsg)//window.location。href=https://www.yisu.com/zixun/window.location.protocol + + window.location“//薄Ｖ骰?/#/登录的
返回
}
如果(response.data。errno==400) {
拒绝(响应)
返回
}
解决(响应)//把请求到的数据发到引用请求的地方
})
.catch(错误=比;{//console.log(“请求异常信息=祝辞:' +选项。params + ' \ n ' + '响应“+错误)
debug.log(“请求异常信息=祝辞:' +选项。params + ' \ n ' + '响应“+错误)
拒绝(错误)
})
})
}
