ajax的原函数,如何实现异步代码用同步方式写(Web端)？

前端写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函数，参数是函数引用，就像这样的：

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、执行拼接的字符串函数

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);

}();

后记

上面的方式，用于实际项目上还需要继续调整和细节处理，提供一个可行性。

可以依赖于构建工具或者Node等来实现将同步代码编译成异步代码执行，这样可以免去用define函数包裹