现在应该大部分公司都是前后端分离了。so,数据请求的封装还是必须的。
为了实现向ios中block封装请求的异步的效果,我采用JavaScript中promise这个对象。
var p1 = New promise((resolve,reject)=>{ var timeOut = Math.random() * 2; log('set timeout to: ' + timeOut + ' seconds.'); setTimeout(function () { if (timeOut < 1) { log('call resolve()...'); resolve('200 OK'); } else { log('call reject()...'); reject('timeout in ' + timeOut + ' seconds.'); } }, timeOut * 1000); })
其中resolve,reject就相当于是你定义了两个block,然后把数据传出去。
继续往下看,紧接着上面的代码
var p2 = p1.then(function (result) { //resolve 导出的数据 console.log('成功:' + result); }); var p3 = p2.catch(function (reason) { //reject 导出的数据 console.log('失败:' + reason); });
通过查阅资料还发现另外两种用法,Promise.all 和 Promise.race这两种。
var p1 = new Promise(function (resolve, reject) { setTimeout(resolve, 500, 'P1'); }); var p2 = new Promise(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函数
第二种
var p1 = new Promise(function (resolve, reject) { setTimeout(resolve, 500, 'P1'); }); var p2 = new Promise(function (resolve, reject) { setTimeout(resolve, 600, 'P2'); }); Promise.race([p1, p2]).then(function (result) { console.log(result); // 'P1' });
race跑步的意思,看谁跑得快,跑得慢的就被摒弃掉了。
上面这些是封装的基础,下面来看具体应用#
基于axios的请求封装
//判断请求环境来区分链接 生产环境和测试环境 const ajaxUrl = env === 'development' ""; var cid = window.localStorage.getItem('X-CID') ""; // var language = window.localStorage.getItem('language') ""; var language = tools.getCookie('language')"en-US" "en" : language ; debug.log(language) var params = tools.deepClone(options.params);//深拷贝 var sign_str = tools.sign(params); //签名 const instance = 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秒超时 }); let httpDefaultOpts = { //http默认配置 method:options.method, url: options.url, timeout: 600000, params:Object.assign(params), data:qs.stringify(Object.assign(params)), // headers: options.method=='get'"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请求 delete httpDefaultOpts.data }else{ delete httpDefaultOpts.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) }) }) }
外面再包一层
export function getNodeDetailInfo(address) { return axiosfetch({ url:api.nodeDetailAPI,//链接 method:"get",//get请求 params:{//数据 address:address } }) }
再下面就是实际应用。
getNodeDetailInfo(address).then(res => { var data = res.data.data; }).catch(error => { console.log(error, '请求失败') })
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
暂无评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。
更新日志
2024年11月30日
2024年11月30日
- LuciaMicarelli《AnEveningWithLuciaMicarelli(Live)》[WAV分轨]
- 娜琏《NA》[320K/MP3][51.93MB]
- 娜琏《NA》[FLAC/分轨][293.28MB]
- (G)I-DLE《I SWAY》[320K/MP3][26.11MB]
- 黑鸭子2005-发烧[首版][WAV+CUE]
- 黄思婷2002-感动[豪记唱片][WAV+CUE]
- 黄乙玲1993-受伤的心·冷暖人生[台湾首版][WAV+CUE]
- (G)I-DLE《I SWAY》[FLAC/分轨][150.46MB]
- FTISLAND《Serious》[320K/MP3][82.33MB]
- FTISLAND《Serious》[FLAC/分轨][476.5MB]
- 曾庆瑜1988-你听一听[清优][WAV+CUE]
- Bach,Vieuxtemps,Gruenberg-ViolinConcertos-Heifetz(2012)FLAC
- ConcertoScirocco-SirensSoldiers.SongswithoutWordsfromtheItalianSeicento(2024)[24
- NCT 127《WALK - The 6th Album》[320K/MP3][76.57MB]
- NCT 127《WALK - The 6th Album》[FLAC/分轨][432.81MB]