anyuan2002.com - vwin网

查找: 您的方位主页 > 电脑频道 > 编程代码 > 阅览资讯:怎么处理在实战中碰到的ajax恳求办法问题?

怎么处理在实战中碰到的ajax恳求办法问题?

2017-07-02 11:47:27 来历:www.anyuan2002.com 【

怎么处理在实战中碰到的ajax恳求办法问题?

前语

最近在做一个针对单个节点测速的功用页面,测速的逻辑是,测上传速度时,前端传5m数据给server,记载上传和回来数据的时刻,测下载速度时,从server下载1m的数据,记载下载和下载成功的时刻,上传和下载用的是ajax同步以避免客户端带宽堵塞的问题,并进行3次取平均值。在开发进程过,由于ajax同步异步的问题,走了不少弯路,特别也把之前遇到的事务逻辑收拾汇总一下。

ajax恳求办法如下

一、一般的ajax,async即同步异步处理,success之后,会有data回来值,status恳求状况,xhr封装的是恳求头,但要留意是的是,并不是一切的恳求头信息都能获取到的,比方center-length就获取不到

$.ajax({ 
 type: "GET", 
 async: true, //异步履行 默许是true异步 
 url: url, 
 dataType: "json", 
 // jsonp: "callback", 
 success: function(data, status, xhr){ 
 console.log(data);//回来值 
 console.log(status);//状况 
 console.log(xhr);//obj 
 console.log(xhr.getResponseHeader("Content-Type"));//application/octet-stream 
 console.log(xhr.getResponseHeader("Center-Length"));//null 
 } 
 
}); 

二、有时候碰到的事务逻辑是这样的,恳求2依靠恳求1的回来成果,恳求3依靠恳求2的回来成果,假如用回调的办法写,会很冗长,处理的办法有两个,首要来看ES5的处理办法

(1)ES5的处理办法,用ajax同步,默许的ajax是异步的,即多个恳求一起履行,改成同步后,ajax一个一个的履行,这样ajax2就能取到ajax1的回来成果了

let res1 = "" 
let res2 = "" 
 
$.ajax({ 
 type: 'get', 
 async: false, //同步履行 默许是true异步 
 url: pars.domain + "/api.php?Action=xxx&date=2017-03-08&t=" + (new Date).getTime(), 
 dataType: 'json', 
 success: function(res) { 
 if(res.code == 0){ 
  res1 = res.data.bandwidth[0] 
 }else{ 
  
 } 
 } 
}); 
 
$.ajax({ 
 type: 'get', 
 async: false, //同步履行 默许是true异步 
 url: pars.domain + "/api.php?Action=xxx&date=2017-03-08&dom1111" + res1 + "&t=" + (new Date).getTime(), 
 dataType: 'json', 
 success: function(res) { 
 if(res.code == 0){ 
  res2 = res.data.bandwidth[0] 
 }else{ 
  
 } 
 } 
}); 

(2)ES6的处理办法,用promise的then办法,作用和上面的相同,ajax会按次序履行,而且后边的ajax会拿到前一个ajax的回来值,这样写起来,代码看起来会很流通

let pro = new Promise(function(resolve,reject){ 
 let url = pars.domain + "/api.php?Action=xxx=2017-03-08&t=" + (new Date).getTime() 
 let ajax = $.get(url, function(res) { 
 if (res.code == 0) { 
  resolve(resData); 
 } 
 else{ 
 } 
 }, "json"); 
 console.log('恳求pro成功'); 
}); 
 
 
//用then处理操作成功,catch处理操作反常 
pro.then(requestA) 
 .then(requestB) 
 .then(requestC) 
 .catch(requestError); 
 
function requestA(res){ 
 console.log('上一步的成果:'+res); 
 console.log('恳求A成功'); 
 let proA = new Promise(function(resolve,reject){ 
 let url = pars.domain + "/api.php?Action=xxx&date=2017-03-08&t=" + (new Date).getTime() 
 let ajax = $.get(url, function(res) { 
  if (res.code == 0) { 
  resolve(resData); 
  } 
  else{ 
  } 
 }, "json"); 
 }); 
 return proA 
} 
 
function requestB(res){ 
 console.log('上一步的成果:'+res); 
 console.log('恳求B成功'); 
 let proB = new Promise(function(resolve,reject){ 
 
 let url = pars.domain + "/api.php?Action=xxx&date=2017-03-08&t=" + (new Date).getTime() 
 let ajax = $.get(url, function(res) { 
  if (res.code == 0) { 
  resolve(resData); 
  } 
  else{ 
  } 
 }, "json"); 
 }); 
 return proB 
} 
 
function requestC(res){ 
 console.log('上一步的成果:'+res); 
 console.log('恳求C成功'); 
 let proC = new Promise(function(resolve,reject){ 
 let url = pars.domain + "/api.php?Action=xxx&date=2017-03-08&t=" + (new Date).getTime() 
 let ajax = $.get(url, function(res) { 
  if (res.code == 0) { 
  resolve(resData); 
  } 
  else{ 
  } 
 }, "json"); 
 }); 
 return proC 
} 
 
function requestError(){ 
 console.log('恳求失利'); 
} 

三、jsonp跨域,动态增加script标签完结跨域,留意这儿有一个callback需求跟server洽谈好

function switchEngineRoomAjax(api,statusChanged){ 
 var api = api; 
 var statusChanged = statusChanged; 
 var url = api + "?method=setStatus" + "&status=" + statusChanged; 
 
 $.ajax({ 
 type: "GET", 
 url: url, 
 dataType: "jsonp", 
 jsonp: "callback",// 这儿的callback是给后端接收用的,前端经过动态增加script标签,完结回调 
 success: function(res){ 
  if (res.code == 0) { 
  console.log('更改状况 jsonp获取数据成功!'); 
  } 
  else{ 
  } 
 } 
 }); 
}; 

四、还会碰上这种事务逻辑,ajax1 ajax2 ajax3三个异步恳求,不必定哪个先回来数据,都恳求成功后,履行一个回调 function,需求留意的是,独自的ajax也需求是new的promise

ajax1:function(){ 
 var promise = new Promise(function (resolve, reject) { 
 var url = "/api.php?Action=xxx; 
 $.get(url, function(res) { 
  if (res.code == 0) { 
  resolve('queryLog完结!'); 
  } 
  else{ 
  } 
 }, "json"); 
 }); 
 return promise 
}, 
ajax2: function(){ 
 var promise = new Promise(function (resolve, reject) { 
 var url = "/api.php?Action=xxx; 
 $.get(url, function(res) { 
  if (res.code == 0) { 
  resolve('queryGroupNodeList完结!'); 
  } 
  else{ 
  } 
 }, "json"); 
 }); 
 return promise 
}, 
ajax3: function(){ 
 var promise = new Promise(function (resolve, reject) { 
 var url = "/api.php?Action=xxx; 
 $.get(url, function(res) { 
  if (res.code == 0) { 
  resolve('queryGroupNodeMapList完结!'); 
  } 
  else{ 
  } 
 }, "json"); 
 }); 
 return promise 
}, 
initQuery: function(){ 
 var mySelf = this; 
 var promiseList = []; 
 var ajax1Promise = mySelf.ajax1(); 
 var ajax2Promise = mySelf.ajax2(); 
 var ajax3Promise = mySelf.ajax3(); 
 
 promiseList.push(ajax1Promise,ajax2Promise,ajax3Promise); 
 var p1 = new Promise(function (resolve, reject) { 
 console.log('创立1.2秒延时履行promise'); 
 setTimeout(function () { 
  resolve("1.2秒延时履行promise"); 
 }, 1200); 
 }); 
 promiseList.push(p1) 
 
 Promise.all(promiseList).then(function (result) { 
 console.log('ajax悉数履行结束:' + JSON.stringify(result)); // ["Hello", "World"] 
 mySelf.assembleTableData(); 
 }); 
}, 

总结

以上便是这篇文章的悉数内容了,期望本文的内容对咱们的学习或许作业能带来必定的协助,假如有疑问咱们能够留言沟通,谢谢咱们对vwin的支撑。

vwin娱乐场

本文地址:http://www.anyuan2002.com/bcdm/89415.html
Tags: 几种 实战 ajax
修改:vwin网
推行内容
引荐阅览
抢手引荐
引荐文章
关于咱们 | 联络咱们 | 友情链接 | 网站地图 | Sitemap | App | 回来顶部