实际业务中碰到的几种ajax请求方法总结

最近在做一个针对单个节点测速的功能页面，测速的逻辑是，测上传速度时，前端传5m数据给server，记录上传和返回数据的时间，测下载速度时，从server下载1m的数据，记录下载和下载成功的时间，上传和下载用的是ajax同步以避免客户端带宽阻塞的问题，并进行3次取平均值。在开发过程过，因为ajax同步异步的问题，走了不少弯路，特地也把之前遇到的业务逻辑整理汇总一下。

1.普通的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.有时候碰到的业务逻辑是这样的，请求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('请求失败');
}

3.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{
            }
        }
    });
};

4.还会碰上这种业务逻辑，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();
    });
},