在实战中可能碰到的几种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('请求失败'); }