如何实现异步代码用同步方式写(Web端)？

作者: floyd 日期: 2016-09-05

178965

前端写JavaScript的时候，经常需要使用两个异步回调的方法：$.ajax和setTimeout，这两个都是需要异步方式执行回调($.ajax可以设置为同步，但会卡住浏览器，不推荐这么使用)，当有好多个$.ajax的时候，就会出现好多个回调，写起来很麻烦，甚至会出现传说中的回调金字塔，就像叠罗汉那样，Javascript有办法像Java、C#后台语言那样用同步方式写代码么？很抱歉，原生是不支持的(ES6、7会支持Promise同步调用，但需要非常高级的浏览器才支持，即使Node也不完全支持)

一般怎么写？

var start = new Date();
//普通jsonp调用
$.ajax({
        type: "get",
        url: "http://tc.netease.com/zxz/datetime.php",
        dataType: "jsonp",
            success: function(__data){
                //成功后打印时间
                console.log(__data);
                //相隔2秒后再次打印
                setTimeout(function(){
                    console.log(new Date()-start);
                },2000);
            }
        });

上面是比较普遍的写法，$.ajax调用接口后，输出接口值，然后在相隔2秒后，输出时间，要是再多几个，代码就很难想象了，而且经常会有童鞋直接再调用完$.ajax就想得到接口的值，明显是不行的

可不可这样实现？

var start = new Date();
//调用接口，获取返回值
var time = $.ajax("http://tc.netease.com/zxz/datetime.php");
 
console.log(time);
//停顿两秒
setTimeout(2000);
//再输出时间
console.log(new Date()-start);

这里的代码，相比上面的，要清爽很多，简单、直接、明了，而且不容易犯异步请求获取数据的错。
但显然，原生这么写，是不行的。换个思路实现呢？比如这样的：

define(function(){
 
    var start = new Date();
     
    var time = $.ajax("http://tc.netease.com/zxz/datetime.php");
 
    console.log(time);
 
    setTimeout(2000);
 
    console.log(new Date()-start);
});

用一个函数包裹着需要同步跑的代码(实际还是异步)，退一步这样实现的话，貌似还能接受

实现方式

实现方式，类似于ES6、ES7的Babel转换为ES5方式的代码，这里是将函数用字符串拼接，最终使用eval来执行，而内部是用递归来实现，以下为简单实现方式，有点简单粗暴，使用上需要自行注意处理细节问题。

1、定义一个define函数，参数是函数引用，就像这样的：

1	`function` `define(func){}`

2、去掉传进来函数的前缀`function(){`和尾部的`}`

//简单粗暴的使用字符串位置来去掉
funcStr = funcStr.substring(12,funcStr.length-1);

3、获取所有`var`的变量定义，以及将他们都置顶

//置顶所有变量定义，删除所有原函数中的所有var
var varList = funcStr.match(/var\s([0-9a-zA-Z_\$]+)[,;\s]/gi);
evalFunc += varList.join(";") + ";";
//把var都去掉
funcStr = funcStr.replace(/var\s/gi,"");

4、切分代码

将$.ajax和setTimeout为分割点，将函数代码切分为对应数量*2

//切分成多个模块
//模块编号
var switchIndex = 1;
//上一个模块的字符串位置
var lastProcessIndex = 0;
//正则匹配，切分代码
funcStr.replace(/(\w+\s=\s\$.ajax\([^\)]+\))|(setTimeout\(\d+\))/gi,function($a,$b){
    //拼接出代码分隔符前面的代码
    evalFunc += funcStr.substring(lastProcessIndex, funcStr.indexOf($a));
     
    switchIndex +=1;
    //拼接ajax或者setTimeout代码
    evalFunc += ($a.indexOf("$.ajax") > -1 ? processAjax($a,switchIndex) : processSetTimeout($a,switchIndex));
 
    switchIndex +=1;
 
    lastProcessIndex = funcStr.indexOf($a) + $a.length + 1;
});

5、实现$.ajax和setTimeout的逻辑

function processAjax(code,index){
 
    //抽取请求地址
    var url = code.match(/"([^"]+)"/i)[1];
    //抽取出返回值赋值的变量名
    var param = code.match(/(\w+)\s=\s/i)[1];
 
    var ret = 'case '+index + ':';
 
    ret += '$.ajax({\
        type: "get",\
        url: "'+url+'",\
        dataType: "jsonp",\
        success: function(__data){\
             '+param+'=__data;\
             process('+(index+1)+');\
        }\
    });';
 
    ret += 'break;';
 
    return ret;
}
 
function processSetTimeout(code,index){
 
    //抽取时间
    var time = code.match(/\d+/i)[0];
 
    var ret = 'case '+index + ':';
 
    ret += 'setTimeout(function(){\
        process('+(index+1)+');\
    },'+time+');';
 
    ret += 'break;';
 
    return ret;
}

6、执行拼接的字符串函数

1	`eval(evalFunc);`

最终实现的代码

上面是实现的思路，实现细节上没有写，下面是完整的实现代码，比较简陋的方式，提供一个实现的思路

//处理ajax代码逻辑
function processAjax(code,index){
 
    //抽取请求地址
    var url = code.match(/"([^"]+)"/i)[1];
    //抽取出返回值赋值的变量名
    var param = code.match(/(\w+)\s=\s/i)[1];
 
    var ret = 'case '+index + ':';
 
    ret += '$.ajax({\
        type: "get",\
        url: "'+url+'",\
        dataType: "jsonp",\
        success: function(__data){\
             '+param+'=__data;\
             process('+(index+1)+');\
        }\
    });';
 
    ret += 'break;';
 
    return ret;
}
//处理setTimeout逻辑
function processSetTimeout(code,index){
 
    //抽取时间
    var time = code.match(/\d+/i)[0];
 
    var ret = 'case '+index + ':';
 
    ret += 'setTimeout(function(){\
        process('+(index+1)+');\
    },'+time+');';
 
    ret += 'break;';
 
    return ret;
}
//具体包裹的函数实现,func为函数引用
function define(func){
 
    var funcStr = func.toString();
 
    //去掉functon和末尾的}
    funcStr = funcStr.substring(12,funcStr.length-1);
    //定义最终执行的函数字符串
    var evalFunc = "!function(){";
     
    //置顶所有变量定义
    var varList = funcStr.match(/var\s([0-9a-zA-Z_\$]+)[,;\s]/gi);
    evalFunc += varList.join(";") + ";";
 
    //把var都去掉
    funcStr = funcStr.replace(/var\s/gi,"");
    //定义内部递归调用的函数，参数为模块编号
    evalFunc += 'function process(__process_index){';
    //分割后的模块编号
    var switchIndex = 1;
    //上一个分割模块的字符串位置
    var lastProcessIndex = 0;
    //利用switch来实现针对模块编号执行
    evalFunc += 'switch(__process_index){';
 
    //切分成多个模块，以$.ajax和setTimeout为分隔符
    funcStr.replace(/(\w+\s=\s\$.ajax\([^\)]+\))|(setTimeout\(\d+\))/gi,function($a,$b){
        //分割符前面的代码模块
        evalFunc += 'case '+switchIndex+':';
        evalFunc += funcStr.substring(lastProcessIndex, funcStr.indexOf($a));
        //最终需要递归调用回下一个模块
        evalFunc += 'process('+(switchIndex+1)+');break;';
        //模块自增
        switchIndex +=1;
        //添加分割符的代码，$.ajax或者setTimeout
        evalFunc += ($a.indexOf("$.ajax") > -1 ? processAjax($a,switchIndex) : processSetTimeout($a,switchIndex));
 
        switchIndex +=1;
        //把模块字符串位置往后移动
        lastProcessIndex = funcStr.indexOf($a) + $a.length + 1;
    });
 
    //补齐分割完的最后的代码
    evalFunc += 'case '+switchIndex+':';
    evalFunc += funcStr.substring(lastProcessIndex);
    evalFunc += 'break;';
 
    evalFunc += '}';
 
    evalFunc += "}process(1);}();";
    //执行拼接好的函数
    eval(evalFunc);
}
 
//调用方式
define(function(){
 
    var start = new Date();
 
    var time = $.ajax("http://tc.netease.com/zxz/datetime.php");
 
    console.log(time);
 
    setTimeout(2000);
 
    console.log(new Date()-start);
});

实际上执行的代码

调用上面的define函数，实际上并非执行里面的函数引用，而是执行拼接好的函数字符串，最终上面生成的用来执行的函数会变成如下：

//自执行函数
!function(){
    //将所有变量抽取置顶后的结果
    var start ;var time ;
    //定义了递归调用的函数
    function process(__process_index){
        //用switch来执行对应的模块，下面是根据$.ajax和setTimeout切割出来的执行模块
        switch(__process_index){
            case 1:
            start = new Date();
            process(2);
            break;
        case 2:
            $.ajax({
                    type: "get",
                    url: "http://tc.netease.com/zxz/datetime.php",
                    dataType: "jsonp",
                    success: function(__data){time=__data;process(3);}
                });break;
        case 3:
            console.log(time);
            process(4);
            break;
        case 4:
            setTimeout(function(){process(5);},2000);
            break;
        case 5:
        console.log(new Date()-start);
        break;
        }
    }
    //默认执行模块1
    process(1);
}();