如何解决在实战中碰到的ajax请求方法问题?

如何解决在实战中碰到的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(); 
 }); 
}, 

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对路饭的支持。